CEBplusUtility

都合により、このページのURLを変更します。

http://www.tinybeans.net/blog/download/mt-plugin/ceb2-plusutility.html

お手数をお掛けしてすみませんが、ブックマークされている方は変更してください。

CEB2_plusUtilityとは

CEB2_plusUtilityとは、Movable Typeのブログ記事投稿画面に、任意の機能を持ったボタンを追加できるプラグインCustomEditorButton2に使用頻度の高そうなボタンを追加するプラグインです。

このCustomEditorButton2という素敵なプラグインを作り、拡張プラグインの作り方まで親切に公開してくださっているblog.aklaswad.comさまに感謝いたします。

ちなみに、CEB2_plusUtilityという名前は、CustomEditorButton2を略して「CEB2」、それにユーティリティを追加するということで「plusUtility」とつけました。

動作環境など

Firefox2、IE6、Opera9.x、Safari3.1（Win)では問題なく使用できました。ただし、Safariだとボタンによっては動作が1クリックだと反応しないものがありますので、そういう場合は2回クリックしてください。

また、Movable Typeの記事投稿フォーマットを「なし」にして使用することを前提としています。「改行を変換」でも使えると思いますが未確認です。うっかり意図せぬ<br />が入ってしまうでしょうからお勧めしません。そのうち、「改行を変換」に最適化したモデルも作りたいと思います。

仕様

～

選択した文字を、h2、h3、h4、h5、h6要素で囲むボタンです。

<h2>選択した文字</h2>

（バージョン 0.2 で追加）

記事を書くとき、これからどういう順番でどんな内容を書くのか、最初に見出しを考えておくと、全体の流れが整理された文章が書ける気がします。

そのようなときに、最初にインデックスを書いて、まとめて h2 から h6 要素でマークアップできたら便利だろうということで作りました。

h2 要素からというのは、基本的に SEO を考えると、h1 要素は記事タイトル欄の内容だろうという前提があるためです。

使い方は簡単で、h2 要素はインデントなし、h3 要素はスペース1つインデント、h4 要素はスペース2つインデント、といった具合に、インデントするスペースの数を1つずつ増やせばOKです。

あとは全体を選択してボタンを押せば、気持ちよくインデックスができます。

なお、すべての行が１行空きでマークアップされます。最初は行間を空けていませんでしたが、ちょっとゴチャゴチャして見にくかったので。

注意点：文字列中に全角スペースがある場合は全て半角スペースに変換してしまいます。今後の改良に期待。

[選択する文字列の書式]

この行は h2 要素です
　この行は h3 要素です
　　この行は h4 要素です
　　　この行は h5 要素です
　　　　この行は h6 要素です

[ボタン実行後]

<h2>この行は h2 要素です</h2>

<h3>この行は h3 要素です</h3>

<h4>この行は h4 要素です</h4>

<h5>この行は h5 要素です</h5>

<h6>この行は h6 要素です</h6>

選択した文字を、dl要素、dt要素、dd要素で囲むボタンです。

複数行をまとめて選択し、1行目をdt要素、2行目をdd要素、3行目をdt要素、4行目をdd要素・・・というように、奇数行をdt要素、偶数行をdd要素で順に囲み、全体をdl要素で囲むようになっています。

したがって、偶数行を選択することを前提としていますが、奇数行を選択しても大きな問題はありません（後述）。なお、最終行の最後の改行は選択不要です。

[偶数行を選択した場合]

<dl>
<dt>1行目</dt>
<dd>2行目</dd>
<dt>3行目</dt>
<dd>4行目</dd>
<dt>5行目</dt>
<dd>6行目</dd>
<dt>7行目</dt>
<dd>8行目</dd>
<dt>9行目</dt>
<dd>10行目</dd>
</dl>

奇数行を選択した場合は次のようなメッセージを表示し、「OK」を押すと処理を実行し、最後の奇数行を dd 要素で囲みます。

[奇数行の場合]

<dl>
<dt>1行目</dt>
<dd>2行目</dd>
　・・・・
<dt>29行目</dt>
<dd>30行目</dd>
<dd>31行目</dd>
</dl>

上記のでは足りなかった場合に、同じ仕様で dt 要素と dd 要素を追加します。

（バージョン 0.2 で追加）

上記ボタンは、機械的に dt 要素と dd 要素を順番にマークアップしてくれるので非常に便利なのですが、例えば、「1つの dt 要素に対して2つの dd 要素をしたい」という場合には使えなくなってしまいます。

そこで、この問題点を解消するためと、 文章を作るときに dt 要素と dd 要素をビジュアル的に分かりやすくするために、スペースでインデントさせることによって dt 要素と dd 要素を使い分けるボタンを作りました。

仕組みは、上のボタンとほぼ同じです。dt 要素はインデントなし、dd 要素はスペース1つインデントして、全体を選択してボタンを押せばOKです。

[選択する文字列の書式]

この行は dt 要素です
　この行は dd 要素です
この行は dt 要素です
　この行は dd 要素です
　この行は dd 要素です

[ボタン実行後]

<dl>
<dt>この行は dt 要素です</dt>
<dd>この行は dd 要素です</dd>
<dt>この行は dt 要素です</dt>
<dd>この行は dd 要素です</dd>
<dd>この行は dd 要素です</dd>
</dl>

また、「1つの dd 要素にまとめたい複数行（改行が複数）にまたがる文字列」の1行目を「スペース1つインデント」し、2行目以降を「スペース2つインデント」すると、その「スペース2つインデント」した行は手前の行と同じ dd 要素とみなし、dd 要素でマークアップされません。

[選択する文字列]

dt 要素の内容
　【スペース1つ】dd要素の内容その1（次の行と合わせて1つのdd要素にしたい）
　　【スペース2つ】dd要素の内容その2（前の行と合わせて1つのdd要素にしたい）

[ボタン実行後]

<dl>
<dt>dt 要素の内容</dt>
<dd>【スペース1つ】dd要素の内容その1（次の行と合わせて1つのdd要素にしたい）
【スペース2つ】dd要素の内容その2（前の行と合わせて1つのdd要素にしたい）</dd>
</dl>

これは、次のように dd 要素の内容をリスト要素でマークアップしたいときなどに便利です。

<dl>
<dt>dt 要素の内容</dt>
<dd><ul>
	<li>【スペース1つ】dd要素の内容その1（次の行と合わせて1つのdd要素にしたい）</li>
	<li>【スペース2つ】dd要素の内容その2（前の行と合わせて1つのdd要素にしたい）</li>
</ul></dd>
</dl>

（バージョン 0.2 で追加）

今回追加したボタンと同様の仕様で、dt 要素と dd 要素をマークアップします。

後からdt 要素と dd 要素を追加したくなったときに使えます。

選択した文字（引用文）を blockquote 要素で囲みます。

選択した文字（引用文）が文章のみの場合は blockquote 要素で囲むだけですが、以下の方法で、titile 属性、cite 属性、さらには blockquote 要素の近くに cite 要素を追加することができます。

title 属性や cite 属性付のblockquote 要素を挿入したい場合、一度文字列を何も選択しない状態でこのボタンをクリックして次のような項目を挿入します。

[文字列を選択しないでボタンを押すと書き込まれる]

bq_URI:
bq_ISBN:
bq_Title:
bq_Quote:

各項目には、以下の内容を入力します。

bq_URI:　引用元がWebページの場合、そのWebページのURI
bq_ISBN:　引用元が書籍の場合、その書籍のISBNコード
bq_Title:　引用元のWebページまたは書籍のタイトル
bq_Quote:　引用文

必要事項を記入し、もう一度全体を選択（イメージ）してクリックすると、各項目に入力した内容が、title 属性や cite 属性として追加された blockquote 要素でマークアップできます。

引用元がWebサイトではなく書籍だった場合（bq_ISBN:に入力がある場合）には、cite 属性にurm:スキームの一つとしてIANAに登録されているisbn:スキームの書式でISBNコードを追加できます。

[必要な項目を入力（Webページ）]

bq_URI:http://www.tinybeans.net/blog/2008/03/-customeditorbutton2.html
bq_ISBN:
bq_Title:記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2
bq_Quote:CustomEditorButton2（MT4.1 以降専用）という素敵なプラグインを見つけてしまいました。
これは、ブログ記事の投稿画面に、任意の機能を持たせたボタンを追加できるプラグインで、つい先日見つけた「MTのエントリーが便利になるプラグイン - tagAssist」と似た機能を提供してくれるプラグインです。

[全体を選択してボタンを押す（Webページ）]

<cite><a href="http://www.tinybeans.net/blog/2008/03/-customeditorbutton2.html">記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2</a></cite>

<blockquote cite="http://www.tinybeans.net/blog/2008/03/-customeditorbutton2.html" title="記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2">
<p>CustomEditorButton2（MT4.1 以降専用）という素敵なプラグインを見つけてしまいました。</p>
<p>これは、ブログ記事の投稿画面に、任意の機能を持たせたボタンを追加できるプラグインで、つい先日見つけた「MTのエントリーが便利になるプラグイン - tagAssist」と似た機能を提供してくれるプラグインです。</p>
</blockquote>

[必要な項目を入力（書籍）]

bq_URI:
bq_ISBN:4-7980-1092-8
bq_Title:Web標準の教科書（益子貴寛）
bq_Quote:根拠となるリソースが書籍であれば、ISBN（International Standard Book Number）を指定するといいだろう。ISBNコードを指定する書式はRFC3187で規定されており、urn:スキームのひとつとしてIANAに登録されているisbn:スキームで指定する。

[全体を選択してボタンを押す（書籍）]

<cite>Web標準の教科書（益子貴寛）</cite>

<blockquote cite="urn:isbn:4-7980-1092-8" title="Web標準の教科書（益子貴寛）">
<p>根拠となるリソースが書籍であれば、ISBN（International Standard Book Number）を指定するといいだろう。ISBNコードを指定する書式はRFC3187で規定されており、urn:スキームのひとつとしてIANAに登録されているisbn:スキームで指定する。</p>
</blockquote>

上記のように引用元のURIと引用元のタイトルをしっかり書く場合、引用文の近くの本文で引用元タイトルにリンクを張って紹介文などを書く場合が多いと予想されます。

そこで、入力された項目が cite 要素を使う可能性がありそうなパターンの場合、「引用文の近くの本文でcite要素を使いますか？」（イメージ）と聞かれますので、「OK」を選ぶと cite 要素で囲った引用元タイトルへのリンクなどがマークアップされますので、それを本文にお使いください。「キャンセル」を選べば追加されません。

なお、blockquote 要素は直接インライン要素やテキストを含むことができないので、このボタンを押すと blockquote 要素の中を（改行ごとに） p 要素で自動マークアップするか聞かれます（イメージ）。するのであれば「OK」を、他の要素でマークアップするのであれば「キャンセル」を押してください。

選択した文字を、上記とほぼ同じ仕様で q 要素で囲みます。blockquote 要素ボタンの場合にあった確認のダイアログなどは、q 要素には不要なので現れません。

選択した文字を、pre要素（class属性はcode）、code要素で囲みます。

これは、CustomEditorButton2にもともと入っているcodeボタンがpre要素（class属性はcode）で囲むだけなので、それにcode要素を入れ子にしただけです。「&、<、>、"」は自動的に文字参照に置き換えられます。

<pre class="code"><code>
ソースコード
</code></pre>

選択した文字を、p要素で囲みます。このプラグインが記事編集エリアのフォーマットを「なし」で使用するのが前提のためのボタンです。

記事投稿画面で、「ファイルを挿入」ボタンなどで画像を挿入した場合、デフォルトのままだと次のようなソースになると思います。

<form mt:asset-id="121" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="pimage.gif" src="http://www.tinybeans.net/blog/images/pimage.gif" width="22" height="22" class="mt-image-none" style="" /></form>

このform要素にはブログ記事と画像を関連付けるなどの理由があるようですが（画像を挿入したときにformタグがつく理由参照）、「別に関連付けなくていいからもっときれいなソースにしたい」という要望は結構あるのではないでしょうか（自分がそうなので）。

そこで、上記のような画像挿入のソースを選択してこのボタンを押すと、次のようにform要素を取り払い、img要素をクリーンにして、imageというクラス名をつけたp要素で囲みます。

<p class="image"><img alt="pimage.gif" src="http://www.tinybeans.net/blog/images/pimage.gif" width="22" height="22" /></p>

ちなみに、次もそうなのですが、このようにクラス名をp要素につけるかimg要素に直接つけるかでちょっと悩みましたが、やはり画像はその画像のみで1パラグラフと考えた方がしっくりくるのでp要素で囲むことにしました。また、そうしておけば、あとから画像にキャプションをつけたりし易いのかも、と思ったので。

上記と同じ仕様で、画像挿入のソースを選択してこのボタンを押すと、form要素を取り払いimg要素をクリーンにして、thumbというクラス名をつけたp要素で囲みます。

上と違うのはクラス名のみです。僕はimageクラスの方はちょっと大きめの画像をセンターに配置し、thumbクラスの方を左右どちらかによせてサムネール（thumbnail）として使用しています。CSSで使い分ければいいと思います。

上記2つのボタンと同じ仕様で、画像挿入のソースを選択してこのボタンを押すと、form要素を取り払いimg要素をクリーンにします。

このボタン、自分で言うのもなんですがかなり便利です。今この記事を書いている時も重宝しています。

（バージョン 0.2 で不具合を修正）

記事を書いていると、最後に関連エントリーを（手動で）リストアップしてリンクを張ることは結構あると思います。その時、それまで「関連エントリー」という項目名にしていたのか、「関連記事」としていたのか迷ったことはありませんか？

このボタンはそんな細かい統一のところで迷うのは面倒くさいので、ボタンにしちゃおうというものです。

仕様は次のとおり、定義リストを使い[関連エントリー]をdt要素で、リストアップしたリンクをul、li要素でマークアップしてそれ全体をdd要素で囲みます。dl要素には後でCSSを適用し易いようにclass="relatedEntry"が付くようになっています。

[選択するリンク]

<a href="http://www.tinybeans.net/blog/2008/03/-customeditorbutton2.html">記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2</a>
<a href="http://www.tinybeans.net/blog/2008/02/mt-tagassist.html">MTのエントリーが便利になるプラグイン - tagAssist</a>

[ボタン適用後]

<dl class="relatedEntry">
<dt>[関連エントリー]</dt>
<dd><ul>
<li><a href="http://www.tinybeans.net/blog/2008/03/-customeditorbutton2.html">記事投稿画面に任意の機能のボタンを追加できるプラグイン - CustomEditorButton2</a></li>
<li><a href="http://www.tinybeans.net/blog/2008/02/mt-tagassist.html">MTのエントリーが便利になるプラグイン - tagAssist</a></li>
</ul></dd>
</dl>

（バージョン 0.2 で不具合を修正）

タイトルが[関連リンク]になる以外は、上記と同様です。

[ボタン適用後]

<dl class="relatedLink">
<dt>[関連リンク]</dt>
<dd><ul>
<li><a href="http://blog.aklaswad.com/mtplugins/customeditorbutton2.html">CustomEditorButton2</a></li>
<li><a href="http://css-happylife.com/log/movabletype-plugin/000330.shtml">tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの</a></li>
</ul></dd>
</dl>

個人的にWordPressへのリンクを挿入するボタンです。個人的にWordPressへリンクを張ることが多そうだったので作っただけです。不要だったらポケットにしまってください。

<a href="http://wordpress.org/">WordPress</a>

（バージョン 0.2 で追加）

記事中に表を使うことは少ないかもませんが、時々使いたいというときに役立つかもしれません。

csv （カンマ区切り）ファイル、タブ区切りテキスト、あとなんとなくあったら便利かな的なセミコロン区切りテキストに対応しています。

使い方は2通りあります。

【使い方1-1】
まず表を挿入したい場所で、文字列を選択しないでボタンを押します。すると以下のような文字列が表示されます。

table_Caption:
table_Summary:
table_Separator:
table_Data:

【使い方1-2】
表示された文字列に、以下のような内容を記入します。

• table_Caption:表のタイトルを記入します。
• table_Summary:表の概要を記入します。
• table_Separator:区切り文字を記入します。使用できる区切り文字は「 , 」（カンマ）、「タブ」（全角カナでタブと記入）、「 ; 」（セミコロン）です。
• table_Data:データを記入します。上記の区切り文字で書かれたデータを記入します。csv ファイルからコピペしてもOKですね。

ここで記入された内容が、それぞれ以下のようにマークアップされます。

• table_Caption: table 要素の開始タグ直後の caption 要素
• table_Summary: table 要素の summary 属性
• table_Separator: データの区切り文字
• table_Data: 表にするデータ

なお、table_Caption、table_Summary に関しては、省略しても問題はありません。省略する場合は、次の「使い方2」の方が簡単でしょう。

ちなみに、summary 属性に関しては、WCAG1.0 では[優先度3]とされていましたが、WCAG 2.0 達成基準では「これはもはや適合には必要ではない。しかしながら、レイアウトテーブルにおいては、summary属性は省略するか空にしなければならない。」とされています。

【使い方1-3】
最後に全体を選択してボタンを押せばOKです。ボタンを押すと、1行目を th 要素にするか聞かれますので（イメージ）、必要であれば「OK」を、不要であれば「キャンセル」を押してください。

[選択する文字列の書式]

table_Caption:表ボタンサンプル
table_Summary:表を簡単に（？）作れるボタンです。
table_Separator:,
table_Data:ヘッダ（1-1）,ヘッダ（1-2）,ヘッダ（1-3）,ヘッダ（1-4）
セル（2-1）,セル（2-2）,セル（2-3）,セル（2-4）
セル（3-1）,セル（3-2）,セル（3-3）,セル（3-4）
セル（4-1）,セル（4-2）,セル（4-3）,セル（4-4）
セル（5-1）,セル（5-2）,セル（5-3）,セル（5-4）

[ボタン実行後]

<table summary="表を簡単に（？）作れるボタンです。">
<caption>表ボタンサンプル</caption>
<tr>
	<th>ヘッダ（1-1）</th><th>ヘッダ（1-2）</th><th>ヘッダ（1-3）</th><th>ヘッダ（1-4）</th>
</tr>
<tr>
	<td>セル（2-1）</td><td>セル（2-2）</td><td>セル（2-3）</td><td>セル（2-4）</td>
</tr>
<tr>
	<td>セル（3-1）</td><td>セル（3-2）</td><td>セル（3-3）</td><td>セル（3-4）</td>
</tr>
<tr>
	<td>セル（4-1）</td><td>セル（4-2）</td><td>セル（4-3）</td><td>セル（4-4）</td>
</tr>
<tr>
	<td>セル（5-1）</td><td>セル（5-2）</td><td>セル（5-3）</td><td>セル（5-4）</td>
</tr>
</table>

【使い方2-1】
「 , 」（カンマ）、「タブ」（全角カナでタブと記入）、「 ; 」（セミコロン）のいずれかの文字で区切られたデータを作成し、そのデータを選択してボタンを押します。

【使い方2-2】
ボタンを押すと次のように聞かれますので、作成したデータの区切り文字を入力して「OK」を押し、1行目を th 要素にするか聞かれますので、必要であれば「OK」を、不要であれば「キャンセル」を押せば完了です。

ヘッダ（1-1）	ヘッダ（1-2）	ヘッダ（1-3）	ヘッダ（1-4）
セル（2-1）	セル（2-2）	セル（2-3）	セル（2-4）
セル（3-1）	セル（3-2）	セル（3-3）	セル（3-4）
セル（4-1）	セル（4-2）	セル（4-3）	セル（4-4）
セル（5-1）	セル（5-2）	セル（5-3）	セル（5-4）
セル（6,1）	セル（6,2）	セル（6,3）	セル（6,4）

注意点：カンマ区切りの場合、セル内にカンマがあるデータ（1,500円など）はカンマ以外の区切り文字を使用してください。エクセルで吐き出される csv では「,"1,500円",」のようになっていますが、それには対応していません。

インストール

このプラグインは、CustomEditorButton2に機能を追加するプラグインですので、使用するにはCustomEditorButton2がインストールされている必要があります。以下の作者のサイトからダウンロードしてインストールしてください。

• CustomEditorButton2

CustomEditorButton2をインストールしたら下記よりCEB2_plusUtilityをダウンロードして解凍してください。

解凍したフォルダに、「mt-static」と「plugins」があるので、その中の「CEB2_plusUtility」のフォルダを、それと同じ構成になるようにMovable Typeがインストールされているフォルダにアップロードしてください。

記事投稿画面に次のようなボタンが現れればOKです（一部、CustomEditorButton2 の作者のボタンもありますし、順番は違うかもしれません）。

ダウンロード

• CEB2_plusUtility_021.zip（2008-06-02：バージョン0.21、最新版）
• CEB2_plusUtility_02.zip（2008-05-28：バージョン0.2）
• CEB2_plusUtility_01.zip（2008-05-02：バージョン0.1）

チェンジログ

【2008-06-02】

CEB2_plusUtility 0.21 にアップデートしました。上記の内容も 0.21 のものに変更してあります。

【2008-05-28】

CEB2_plusUtility 0.2 にアップデートしました。

以上です。

JavaScript初学者なのでソースはかなり素人丸出しだと思いますが、興味がある方はご自由にお使いください。自己責任でお願いします。不具合等ありましたらコメントください。

[関連リンク]

• CustomEditorButton2