今日の開発:TinyMCE Plugin for Movable Type Ver1.00 Ja 正規版リリース

4月 28, 2006 in Movable Type


1月中旬から開発をはじめて、3ヶ月、ようやく正規版公開。

このプラグインはWYSIWYGモードでXHTMLを編集できるエディタ、TinyMCEシックス・アパート株式会社が販売するMovable Type 3.2日本語版 Release-2上で利用するためのプラグインだ。
※制作の過程でTinyMCEの日本語化パックも作った。

今回リリースしする正規版は、ソースは同じものだが、LGPLライセンスと商用ライセンスによって配布される。
やむをえずLGPLライセンスが利用できない方のため商用ライセンスを用意したのであり、LGPLの範疇でご利用される場合は、非商用、商用問わず無償でご利用できるので、ご安心いただきたい。
※詳細は添付ドキュメントを読んでいただきたい。
※商用ライセンスに関する記述のある公開サイトは現在準備中だ。

◆β5からの相違

  1. 1. 生成されるXHTMLソースの<img>タグ、<tabele>タグのborder="0"を自動で削除
  2. ヘルプファイルを除く完全日本語化
  3. 挿入されるファイル等のURLの絶対パス化
  4. その他細かいバグの修正
  5. 外語ファイルの削除による軽量化

である。

では組み方の説明スタート。

◆事前準備

構成ファイルがかなり異なり、※上書きした場合の動作不具合がでる可能性があるので、クリーンインストールが基本だ。
すでにβ版を利用されている方は、/mt-static/TinyMCEforMT以下をすべて削除していただきたい。
mt-static/TinyMCEforMT/mycontent.css等の設定ファイルは要バックアップ
※残りのファイルは上書きインストールでかまわないので、そのままでかまわない。

以上で準備完了。

◆インストールについて

■ダウンロード

SourceForge.jpの TinyMCE for Movable Type開発プロジェクトからダウンロードできる。
http://sourceforge.jp/projects/tinymce-for-mt/

■設定作業

ダウンロードしたファイルを解凍したのが下記の画像だ。

Beta5インターフェイス

まず、必ず読んで.txtを必ず読んでほしい。
使用条件等の大事なことが書いてあるので、できればプリントしていただきたい。
次ぎにmt-static/TinyMCEforMT/mycontent.cssの中身を使用環境に書き換える。
※CSSが理解できない人は無理に書き換えないほうがいい。
編集しなかった方は、残念ながら編集文字が大きくなるだけだ。
yourclass01、yourclass02、youreclass03は名前だけなので選択しても何もおこらない。

以上で準備完了

■アップロード

必ず読んで.txt以外のファイルすべてをmt.cgiのあるディレクトリにアップロード。
以上でインストール完了。

■確認

メイン・メニュー > システム・メニュー > プラグインから
TinyMCEforMT バージョン Ver1.00 Jaの文字があれば設定は完了。

◆利用する前に

  1. 改行設定を「なし」にする。(※メイン・メニュー > ブログ名 > 新規投稿の設定から行える)
  2. 編集ボタンの右から2個目、3個目で編集枠の大きさを決める
  3. 右端のWYSIWYGボタンを押すと下記の画面になる。

TinyMCE Plugin for Movable Type Ver1.00 Ja編集パネル
▲TinyMCE Plugin for Movable Type Ver1.00 Ja編集パネル

◆簡単な機能紹介

まず、Movable Type標準編集パネルを見ていただたい。

Movable Type標準編集パネル

Movable Type3.2の標準編集パネルは

  1. 強調
  2. 斜線
  3. 下線
  4. リンクの挿入
  5. メールアドレスの挿入
  6. インデント入

と少なく、HTMLを知らない人は、たった6つ編集機能しか使えない。
これはフリーで借りれるブログの編集機能以下であることは間違いない。

ところが、TinyMCE Plugin for Movable Type Ver1.00 Jaをインストールすると…

エディタの上段 左から

  1. 強調
  2. 斜線
  3. 下線
  4. 打消
  5. 左揃え
  6. 中央揃え
  7. 右揃え
  8. 両端揃え
  9. classの適応
  10. 書式の適応
  11. フォントサイズの適応

中段

  1. 箇条書き
  2. 段落番号
  3. アウトデント
  4. インデント
  5. 元に戻す
  6. 繰り返し
  7. リンク
  8. リンクの挿入・編集
  9. リンクをはずす
  10. アンカーの挿入・編集
  11. コードの整理
  12. ヘルプ(英文)
  13. HTMLソースの編集
  14. 文字色の選択
  15. 背景色の選択
  16. 切り取り
  17. コピー
  18. 貼り付け
  19. 書式なしで貼り付け
  20. ワードからの貼り付け
  21. 検索
  22. 置換
  23. プレビュー

下段

  1. 表の挿入・編集
  2. 行の編集
  3. セルの編集
  4. 前に行の挿入
  5. 後に行の挿入
  6. 行を削除
  7. 前に列の挿入
  8. 後に列の挿入
  9. 列を削除
  10. セルの分割
  11. セルのマージ
  12. 罫線の挿入
  13. フォーマットの削除
  14. 隠れたガイドのトグル
  15. 下付文字の挿入
  16. 上付文字の挿入
  17. 特殊文字の挿入
  18. 顔キャラの挿入
  19. Flashファイルの挿入・編集

と53種類の編集機能が利用できるようになり、HTMLを知らない人でも驚くほどMovable Typeの編集能力が向上する。

しかも、インターフェイスはワードに似ているので、操作を覚えるのは簡単。
以下、主な機能を図で見ていただきたい。

エディタ

▲文字編集機能

文字を選んで、色や、背景色や、大きさを選択するだけの容易さ。

エディタ

▲HTMLソース編集機能

HTMLソースにこだわる方は、HTMLソース編集機能が利用できる。
※現在のバージョンは<div>の自動入力ができない。

表作成機能
▲表作成機能

予めclassを<table>や<td>等に設定しておけば、罫線1ピクセルの表も簡単に制作可能。

エディタ
▲class対応編集

上記画像は読み込んだ画像の配置にクラスを適応している場合だが、これだけでなく、
mt-static/TinyMCEforMT/mycontent.cssの中身を使用環境に書き換えれば、表作成にもcssの設定が選択するだけで行えるようになる。

◆サポートについて

SourceForge.jpの TinyMCE for Movable Type開発プロジェクトにて行う。
http://sourceforge.jp/projects/tinymce-for-mt/

フォーラムが用意してある、近いうちにMLも検討したい。
※SourceForge.jpのアカウントの取得が必要となる。
※ダウンロードだけでしたらアカウントの取得は必要ない。

現在のところ、Movable Type用のプラグインとしは世界最高のエディタであると、自信を持っているので、多くの人に使っていただけば幸いだ。

PS:

ところで専用Web、オンラインマニュアル、商用版の仕様承諾書その他、すべて私が作成中。
GW明けにはなんとかするので、ご勘弁を…。

Facebookフィード購読のおすすめ

僕はFacebookのウォールでブログ記事に書いた以外にも、ソーシャルメディアや、Web制作に関する情報、ライフハック情報などをつぶやいてます。フィード購読を希望の方は、下記の「フィード購読」をクリックするか、Facebookの蒲生 トシヒロのページからお願いします。

ブログの最新投稿はFacebookページ「Hoppos.JP」を購読すれば、あなたのウォールにお知らせが届きます。ブログ記事以外にも、Web制作、ソーシャルメディアに役立つ情報を1日2~3通程度流してます。よろしければ「いいね!」をクリックして購読してください。