お知らせ

Movable Type 5.1 Webサイト製作ガイドVolume 22011年7月20日

Movable Type 5.1 Webサイト製作ガイドVolume 2」を発売しました。
前書「Movable Type 5 Webサイト製作ガイド Volume 2」をMovable Type 5.1対応に改訂しました。 「Movable Type 5.1 Webサイト製作ガイドVolume 1」の続編で、変数等の応用的な機能や、ウェブサイトやテーマなどのMovable Type 5の新機能についてしっかり解説した書籍です。
Movable TypeでWeb製作をされている方などにお勧めです。
PDFによる販売で、当サイトでのみ購入できます(書店では購入できません)

他にも多数書籍を執筆しています。
こちらもぜひご覧ください。

Movable Type用ShortCodeプラグイン・その10(スニペットをjavascriptで出力する)

| コメント(0) | トラックバック(0)

ShortCodeプラグインのifショートコードでは、ショートコード(のスニペット)を挿入する際に、変数名を入力することができるようになっています。
そして、その変数名に応じて、挿入されるスニペットが変化します。

変数名の入力

config.yamlファイルにちょっとしたJavaScriptを書くと、このようなことを行うことができます。

1.作成する例

昨日、リンクを挿入するlinkショートコードのプラグインを紹介しました。
このプラグインを改良して、リンク先のアドレスを入力できるようにします。

ショートコードの一覧でlinkショートコードを選び、「ショートコードの挿入」ボタンをクリックすると、リンク先のアドレスを入力するためのダイアログボックスが開くようにします。

リンク先のアドレスを入力するダイアログボックス

そして、アドレスを入力すると、「[link href="入力したアドレス"][/link]」のスニペットが記事に入力されるようにします。

2.config.yamlファイルの書き方

上の例のようにする場合、config.yamlファイルの書き方は以下のようになります。

name: Link ShortCode
id: LinkShortCode
author_name: <__trans phrase="Hajime Fujimoto">
author_link: http://www.h-fj.com/blog/
description: <__trans phrase="Shortcode to input link tag.">
plugin_link: http://www.h-fj.com/blog/mtplgdoc/linkshortcode.php
doc_link: http://www.h-fj.com/blog/mtplgdoc/linkshortcode.php
version: 1.00
shortcodes:
  link:
    js: |
      var href = prompt('<__trans phrase="Input URL to link">');
      if (href) {
          return '[link href="' + href + '"][/link]';
      }
      else {
          return false;
      }
    description: Insert Link
    template: <a href="<$mt:GetVar name="_sc_href"$>"><$mt:GetVar name="_sc_content"$></a>

昨日のプラグインとの違いは、「snippet: 入力されるスニペット」の行の代わりに、「js:」の行があることです。
js:の行で、「ショートコードを挿入」ボタンがクリックされた時に実行するJavaScriptを指定します。
このJavaScriptの中で、記事に入力するスニペットを組み立て、その結果をreturnで返すと、実際にスニペットが入力されるようになっています。
一方、スニペットの入力をキャンセルする場合は、「return false;」とします。

上のconfig.yamlファイルだと、JavaScriptは以下のような処理をします。

  • 「Input URL to Link」のダイアログボックスを表示、入力されたアドレスを変数hrefに代入します
  • ダイアログボックスで値が入力され、変数hrefに値がある場合は、その値をもとにlinkショートコードのスニペットを組み立てて、returnで返します。
  • ダイアログボックスの入力がキャンセルされ、変数hrefに値がない場合は、「return false;」として、スニペットの入力をキャンセルします。

なお、上の例のように、JavaScriptが複数行に渡る場合は、js:の行を「js: |」と書き、その次の行以降にJavaScriptを書きます。
また、そのJavaScriptは、「js: |」行よりもインデントを深くします。

Facebook連携

当記事について「いいね」や「送信」を行っていただけると幸いです。


この記事についてウォールに投稿

トラックバック(0)

トラックバックURL: http://www.h-fj.com/mt/mt-tb.cgi/1821.

コメントする


Facebookでコメント

試験的にFacebookのコメントフォームを設置しました。