Movable Type 備忘録

 

 WYSIWYGを入れてみる

今回はワープロ感覚で記事を書くことができるカスタマイズについて紹介します。

実際使ってみましたが、普段使い慣れている Micros●ft W●rd のようです。
これならHTMLタグをあまり覚えていない人でも、さくさくテーブルを作成したり、フォントのサイズを変えてみたり、イメージの追加、フラッシュムービーだって簡単に追加できちゃいます。

しかも視覚的に見えているので、プレビューしながら記事を書いている…そんなかんじと言えば想像つくでしょうか。

そんなワープロ感覚を実現するプラグインは、WYSIWYG(ウィジウィグ)です。
'What You See Is What You Get' の略語なんだそうな。

以下、引用します。

WYSIWYG(ウィジウィグ)とは、「見たものが、手に入るもの」という意味。
作成・編集時にディスプレイ画面で見たものが、そのまま印刷物やHTML文書として出力できることを言う。

WYSIWYG(ウィジウィグ)のEnhancedEntryEditingプラグインを今回使用します。

このEnhancedEntryEditingプラグインを設置することで、デフォルトでスマイリーアイコンをエントリに入れられるようになります。
もちろん自分のお気に入りのアイコンだって追加できますよ。

もうMTSmileyは必要なくなります。

今回お世話になったサイトは、AQUALUNA :: MAC & BLOG様、 ++Blog-ＭＥＬＬ++様です。

WYSIWYG(ウィジウィグ)のインストール

EnhancedEntryEditingプラグインの設置はとっても簡単!!

- 2006.03.22 追記 -

Ajaxify EnhancedEntryEditing Ja 1.01 は、開発を終了しているそうです。
今後、ダウンロードさえできなくなってしまうそうなので、これから使い始めるわたしは、後継の TinyMCE Plugin for Movable Type Ja β5 を使うことにしました。
ここでは、TinyMCE Plugin for Movable Type Ja β5 について説明します。 もし、Ajaxify EnhancedEntryEditing Ja を使いたい人は、以降で説明するパスなどが異なりますので、その都度読み替えてください。

まず、EnhancedEntryEditing プラグインをサーバーにアップロードします。
こちらのようこそ、TinyMCE Plugin for Movable Typeの世界へからダウンロードしてください。
その際気をつけなければいけないことが、MovableType(ムーバブルタイプ) 3.2用、MovableType(ムーバブルタイプ) 3.3用とあるので、各自で使っている環境に合わせてダウンロードしてください。

ダウンロードしたら、適当なフォルダに圧縮ファイルを解凍します。
そして3つのフォルダすべてをmt/ディレクトリの中にアップロードします。

これらのファイルをアップロードするのに、ちょっと…いやいや、かなり時間がかかります。
アップロードできたら、これで設置完了です。

次にWYSIWYG(ウィジウィグ)を使う設定を行います。
MovableType(ムーバブルタイプ)の管理画面からブログを選択して、「環境設定」＞「設定」と辿ってもらい、画面上部に「新規投稿」というリンクがありますので、それをクリックします。

画面内に「改行設定」というプルダウンリストがありますので、その中から "WYSIWYG" を選択して変更を保存します。

以上でEnhancedEntryEditingプラグインの設置は完了です。
エントリ編集画面を表示すると、まるで Micros●ft W●rd のような書式メニューが表示されていますね。

表示されない人は、記事入力エリアの右上あたりに、WYSIWYG(ウィジウィグ)のアイコンがあると思いますので、そちらをクリックしてみてください。

次にエントリに表示するアイコンの追加を説明します。
今回追加するアイコンは、以前も使わせてもらったPEPPERさんのアイコンを追加してみます。

まず、アイコンをアップロードします。
以下のディレクトリの中にアイコンをアップロードしてください。

mt/mt-static/TinyMCEforMT/js/tiny_mce/plugins/emotions/images/

上記ディレクトリの中にはすでにスマイリーアイコンが入っています。
アップロードの際に、ディレクトリは作成せずにアップロードしてくださいね。 ディレクトリ階層を認識しないようなので。

- 2006.10.03 追記 -

TinyMCE 1.10ではディレクトリ階層を認識してくれました。

ということで、わたしの場合はiconディレクトリを作成してその中にアップロードするようにしました。

次に追加したアイコンを表示するよう編集します。以下のファイルをテキストエディで開いてください。

mt/mt-static/TinyMCEforMT/js/tiny_mce/plugins/emotions/emotions.html

基本的に各アイコンのファイル名、アイコンサイズなどを記入して追加していくだけです。
以下はわたしが追加したコードです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$lang_emotions_title}</title>
<script language="javascript" type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script language="javascript" type="text/javascript" src="jscripts/functions.js"></script>
<base target="_self" />
</head>
<body style="display: none">
    <div align="center">
        <div class="title">{$lang_emotions_title}:<br /><br /></div>

        <table border="0" cellspacing="0" cellpadding="7">
        <tr>
            <td><a href="javascript:insertEmotion('smiley-cool.gif','lang_emotions_cool');"><img src="images/smiley-cool.gif" width="18" height="18" border="0" alt="{$lang_emotions_cool}" title="{$lang_emotions_cool}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-cry.gif','lang_emotions_cry');"><img src="images/smiley-cry.gif" width="18" height="18" border="0" alt="{$lang_emotions_cry}" title="{$lang_emotions_cry}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-embarassed.gif','lang_emotions_embarassed');"><img src="images/smiley-embarassed.gif" width="18" height="18" border="0" alt="{$lang_emotions_embarassed}" title="{$lang_emotions_embarassed}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-foot-in-mouth.gif','lang_emotions_foot_in_mouth');"><img src="images/smiley-foot-in-mouth.gif" width="18" height="18" border="0" alt="{$lang_emotions_foot_in_mouth}" title="{$lang_emotions_foot_in_mouth}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('smiley-frown.gif','lang_emotions_frown');"><img src="images/smiley-frown.gif" width="18" height="18" border="0" alt="{$lang_emotions_frown}" title="{$lang_emotions_frown}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-innocent.gif','lang_emotions_innocent');"><img src="images/smiley-innocent.gif" width="18" height="18" border="0" alt="{$lang_emotions_innocent}" title="{$lang_emotions_innocent}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-kiss.gif','lang_emotions_kiss');"><img src="images/smiley-kiss.gif" width="18" height="18" border="0" alt="{$lang_emotions_kiss}" title="{$lang_emotions_kiss}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-laughing.gif','lang_emotions_laughing');"><img src="images/smiley-laughing.gif" width="18" height="18" border="0" alt="{$lang_emotions_laughing}" title="{$lang_emotions_laughing}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('smiley-money-mouth.gif','lang_emotions_money_mouth');"><img src="images/smiley-money-mouth.gif" width="18" height="18" border="0" alt="{$lang_emotions_money_mouth}" title="{$lang_emotions_money_mouth}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-sealed.gif','lang_emotions_sealed');"><img src="images/smiley-sealed.gif" width="18" height="18" border="0" alt="{$lang_emotions_sealed}" title="{$lang_emotions_sealed}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-smile.gif','lang_emotions_smile');"><img src="images/smiley-smile.gif" width="18" height="18" border="0" alt="{$lang_emotions_smile}" title="{$lang_emotions_smile}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-surprised.gif','lang_emotions_surprised');"><img src="images/smiley-surprised.gif" width="18" height="18" border="0" alt="{$lang_emotions_surprised}" title="{$lang_emotions_surprised}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('smiley-tongue-out.gif','lang_emotions_tongue_out');"><img src="images/smiley-tongue-out.gif" width="18" height="18" border="0" alt="{$lang_emotions_tongue-out}" title="{$lang_emotions_tongue_out}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-undecided.gif','lang_emotions_undecided');"><img src="images/smiley-undecided.gif" width="18" height="18" border="0" alt="{$lang_emotions_undecided}" title="{$lang_emotions_undecided}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-wink.gif','lang_emotions_wink');"><img src="images/smiley-wink.gif" width="18" height="18" border="0" alt="{$lang_emotions_wink}" title="{$lang_emotions_wink}" /></a></td>
            <td><a href="javascript:insertEmotion('smiley-yell.gif','lang_emotions_yell');"><img src="images/smiley-yell.gif" width="18" height="18" border="0" alt="{$lang_emotions_yell}" title="{$lang_emotions_yell}" /></a></td>
        </tr>
<tr>
            <td><a href="javascript:insertEmotion('pp_00.gif','lang_emotions_icon00');"><img src="images/icon/pp_00.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon00}" title="{$lang_emotions_icon00}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_01.gif','lang_emotions_icon01');"><img src="images/icon/pp_01.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon01}" title="{$lang_emotions_icon01}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_02.gif','lang_emotions_icon02');"><img src="images/icon/pp_02.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon02}" title="{$lang_emotions_icon02}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_03.gif','lang_emotions_icon03');"><img src="images/icon/pp_03.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon03}" title="{$lang_emotions_icon03}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('pp_04.gif','lang_emotions_icon04');"><img src="images/icon/pp_04.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon04}" title="{$lang_emotions_icon04}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_05.gif','lang_emotions_icon05');"><img src="images/icon/pp_05.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon05}" title="{$lang_emotions_icon05}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_06.gif','lang_emotions_icon06');"><img src="images/icon/pp_06.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon06}" title="{$lang_emotions_icon06}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_07.gif','lang_emotions_icon07');"><img src="images/icon/pp_07.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon07}" title="{$lang_emotions_icon07}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('pp_08.gif','lang_emotions_icon08');"><img src="images/icon/pp_08.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon08}" title="{$lang_emotions_icon08}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_09.gif','lang_emotions_icon09');"><img src="images/icon/pp_09.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon09}" title="{$lang_emotions_icon09}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_10.gif','lang_emotions_icon10');"><img src="images/icon/pp_10.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon10}" title="{$lang_emotions_icon10}" /></a></td>
            <td><a href="javascript:insertEmotion('pp_11.gif','lang_emotions_icon11');"><img src="images/icon/pp_11.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon11}" title="{$lang_emotions_icon11}" /></a></td>
        </tr>
        <tr>
            <td><a href="javascript:insertEmotion('pp_12.gif','lang_emotions_icon12');"><img src="images/icon/pp_12.gif" width="17" height="17" border="0" alt="{$lang_emotions_icon12}" title="{$lang_emotions_icon12}" /></a></td>
        </tr>
</table>
    </div>
</body>
</html>

青い字の部分を追加した分だけ行数を変更しました。
赤い字の部分が追加したアイコンの定義部分です。

数も多いことだし、そのままコピペしてアイコンファイルのパスを各自の環境に合わせて変更してください。
変更が終わったらファイルを保存して、同じ場所にアップロードします。

以上で、アイコンが使えるようになりました。 お好みで自由にアイコンを追加していってください。

SEE YOU♪

  • Edit
  • Permalink
  • Comments(7)
  • Trackbacks(0)

 Trackback Pings(0)

No trackbacks found.

 Comments(7)

#1: Posted by sui [RES]

こんにちは、はじめまして。
こちらの記事を参考にさせてもらい、アイコンの追加をしてみました。
Ver1.00に上がってましたが無事追加することができたんで、ヤッター！と喜んでいたんですが……alt属性が入ってくれません:pp_06a.gif:
色々触ってみて、en.jsに追加すれば言いということは分かったんですが、日本語にするにはどうすればいいんでしょうか。また、特に意味が無いものには　alt=""　を入れたいんですが、自動挿入することは無理でしょうか。
もしお分かりになることでしたら、お暇なときに教えていただけると幸いです。

ーーー
操作に混乱してしまったのでもう一度投稿します。
二重投稿でしたら削除してください。すみません:pp_02.gif:

Posted on May 31, 2006
#2: Posted by bzbell [RES]

>>1 sui さん

こんにちわ^^
ホントだ:pp_02.gif:わたしの方でもalt属性に日本語入れると文字化けしますねぇ。
いろいろ調べたところ、以下の設定を行うことでalt属性に日本語を入れることができました。

  1. mt\mt-static\TinyMCEforMT\js\tiny_mce\plugins\emotions\editor_plugin.jsをエディタで開きます。
  2. 以下のように修正します。 
    修正前
tinyMCE.importPluginLanguagePack('emotions','en,ja-utf-8,
修正後
tinyMCE.importPluginLanguagePack('emotions','ja-utf-8,en,
    en と ja-utf-8 の順番を入れ替えます。
  3. ついでに emotions のウィンドウサイズも大きくしておきます。
    ※必要なければ読み飛ばしてください。
    同ファイル中から width で検索して以下のように修正します。 
    修正前
template['width']=160;template['height']=160;
修正後
template['width']=300;template['height']=300;
    サイズはお好みで:pp_01.gif:
  4. 1.で使用する言語を utf-8-ja に変更したので、以下のファイルにアイコンの日本語を追加します。
    mt\mt-static\TinyMCEforMT\js\tiny_mce\plugins\emotions\langs\ja_utf-8.js
    お使いの環境が euc の場合には、1. のところで ja-euc.jp を先頭に持ってきます。
  5. ファイルを保存(このとき、言語にあった保存を行った方がいいかも、です。
    例えば、使用する言語が utf-8 なら utf-8 で保存します。
  6. 1度、エントリの編集画面から出てもらって、再度編集画面を表示してみてください。
    そしてアイコンを追加して、右上にある WYSIWYG のマークをクリックするとイメージのソースがみれますので、日本語のalt属性が入っていればOKです。

こんなかんじで、わたしの方では日本語のalt属性を追加できました。

また何かありましたら連絡ください。

Posted on June 1, 2006
#3: Posted by shu_sasaki [RES]

初めまして！
と言っても、いつも素敵なブログだなぁ～って拝見させて戴いているので
私的には初めてって感じではないのですが（笑

まだ始めたばかりで、実は良く分からないのですが…
ちょっと質問させてください！
初めてMT3.33をアップロードして使用しております。
エントリーにWYSIWYGで絵文字を使いたかったので、MT3.3用Ver1.10をアップロードし、何とか成功しました。
その後、私もPEPPERさんからお借りした絵文字を…/emotions/imagesに入れ、emotions内のemotions.htm（新バージョンはこうなっていました）
に上記を参考に書き込みました。
しかし、エントリー画面のWYSIWYGを開いてみると、絵文字は４つ程度しか表示されず、追加もされてなくて、逆に元の絵文字の数よりも少なくなってしまいました。
考えられる原因はあるでしょうか？
書き込みが間違っているのではないかとも思ったりするのですが…全然分かりません（泣
お忙しいとは思いますが、アドバイス頂けると有難いです、宜しくお願い致します。

あ、それから、勝手にリンクさせて戴いてます！すみません

Posted on October 3, 2006
#4: Posted by bzbell [RES]

>>3 shu_sasaki さん

はじめまして^^

> と言っても、いつも素敵なブログだなぁ～って拝見させて戴いているので
> 私的には初めてって感じではないのですが（笑

ありがとうございます(*^。^*)
今後もよろしくお願いします。

さて、ご質問の件ですが記事で紹介しているのは前バージョンで、最新版は試してなく、今は何ともコメントできませんが、お時間いただければ帰って、新バージョンをインストールして試してみたいと思います。

いくつか確認させてください。

  • 記事で説明してますが、アイコンを増やしたことにより行数を指定しますが、そちらを変更してもダメだったのでしょうか。
  • >>2のコメントでウィンドウサイズの変更の方法を説明してますが、ウィンドウサイズを変更してもホントにアイコン数が減っているのか確認していただけますか。

お手数おかけして申し訳ないです（つω-`｡）

Posted on October 3, 2006
#5: Posted by bzbell [RES]

>>3 shu_sasaki さん

わたしも最新のTinyMCEプラグインをインストールしてみました。
追加したアイコンも表示できました(￣∇￣;)

わたしの説明が下手なせいかもしれませんが、もう1度修正ファイル、修正内容などを見直してみてください。

特別なことせず、上記手順のようにすればアイコンは追加されますので(＞∀＜　)

また何かありましたらご連絡ください。

- 2006.10.03 追記 -

その後いろいろトライしてみたら原因が分かったよな、分からないような（つω-`｡）

エントリ編集画面の本文、追記の入力エリアのサイズをちっちゃくしたら、たぶんshu_sasaki さんと同じだろうと思う現象がでました。
でも、大きくしてから1度編集画面をぬけて、再度編集画面を表示したところちゃんと表示されたんです。

ぜんぜん自信はありませんが、shu_sasaki さんも試してみてください。
ちなみに、>>2で説明しているウィンドウサイズ変更を行ったら、ウィンドウサイズが大きくなってアイコンが表示されるみたいです。

Posted on October 3, 2006
#6: Posted by shu_sasaki [RES]

こんにちは。

レスが早くてビックリ致しました！どうもありがとうございます。
原因はやっぱり
＞＞ウィンドウサイズの変更
でした。きちんと目を通してない初歩的なミスでした、申し訳ありません。

本当はもっと聞きたい事が山ほどあるんですが・・・自分でも勉強しながら頑張ります！！
有難うございました。
これからも参考にさせてくださいませ！

Posted on October 4, 2006
#7: Posted by bzbell [RES]

>>6 shu_sasaki さん

こんにちわ^^
よかった（￣∇￣;)ほっ

> 本当はもっと聞きたい事が山ほどあるんですが・・・自分でも勉強しながら頑張ります！！

がんばってください(＞∀＜　)
わたしでよければいつでもおチカラになります♪

Posted on October 4, 2006

 Post a Comment

コメント用フィード