RapidWeaverのHTMLエディタをカスタマイズする

印刷用表示 |テキストサイズ 小 |中 |大 |

Repeating Motif Wonderland

更新日 2011-10-02 | 作成日 2007-12-12

RapidWeaverのHTMLエディタをカスタマイズする

2007.9.15



 このサイトはRapidWeaverでHTMLコードを入力して作っています。HTML入力を補助する為に右下に「クイック挿入」ポップアップメニューがあるのですが、これをカスタマイズしてみました。どうやってカスタマイズしたのかを参考までに書いておく事にします。

 現在はRapidWeaverからBiND for WebLiFEに移行しています。このページはBiNDで作成しています。


 オリジナルのプラグインと共存させたかったのですが、どうやらそれはできない様です。かといってカスタマイズしたプラグインをアプリケーションパッケージの中に入れておくと、バージョンアップの際になくなってしまいます。そこでオリジナルのプラグインはアプリケーションパッケージから取り除いておき、カスタマイズしたプラグインを

ライブラリ/Application Support/Rapid Weaver

の中に入れておく事にしました。これでカスタマイズしたプラグインを有効にしつつ、バージョンアップの際に失われない様にできます。

 ただしバージョンアップしたら、アプリケーションパッケージの中のオリジナルプラグインを取り除く作業が必要です。オリジナルプラグインがバージョンアップしていたら、それをカスタマイズする作業も必要です。

HTMLプラグインをコピーする

 オリジナルのプラグインはRapidWeaverアプリケーションがリソースとして持っているので、アプリケーションアイコンを右クリックして「パッケージの内容を表示」を実行します。

 "Contents"フォルダが入ったウィンドウが開きますので、このフォルダをダブルクリックして開きます。この中の"PlugIns"フォルダを開きます。その中に"HTML.rwplugin"がありますので、これを働かせない様にするためにどこか別のフォルダに移動します。

HTMLPlugIn.png

 これをどこにコピーするかですが、「ホーム」から「ライブラリ」フォルダを開いて"Application Support"を探します。このフォルダの中に"RapidWeaver"がありますので、そこに入れておいて下さい。これでRapidWeaverがこのプラグインを認識してくれます。オリジナルとは異なるものである事がわかる様に、名前を変えておく事にします。"MyHTML.rwplugin"としました。

Localizable.stringsを編集する

 それでは"MyHTML.rwplugin"をカスタマイズしていきましょう。"MyHTML.rwplugin"を右クリックして「パッケージの内容を表示」を実行します。

 "Contents"フォルダが入ったウィンドウが開きますので、このフォルダをダブルクリックして開きます。この中の"Resources"フォルダを開くと画像ファイルや各言語にローカライズする為のリソースが入っています。"Japanese.lproj"が日本語のリソースなので、このフォルダを開いて下さい。すると以下の三つのファイルが入っています。

plugInsResource.png

 この中の"Localizable.strings"を何らかのエディタで開いて下さい。標準のテキストエディットでは開けなかったので、私はmiを使いました。以下の図は編集後のものです。

plugInsStrings.png

 この文字列がどこで使われているかというと、ページを新規に追加する時に出てくるシートの中です。要はこれだけなので、面倒ならいじらなくても別に構いません。

newPageSheet.png

quickInsertTemplates.plistを編集する

 次にquickInsertTemplates.plistを編集するためにこれをダブルクリックします。するとプロパティリストエディタが起動します(ひょっとしたら開発ツールをインストールしていない人はプロパティリストエディタが入っていないかもしれません)。

 開いてみるとわかりますが、このファイルには「クイック挿入」メニューの項目と、それに対応するHTMLコードが入っています。そこで私がよく使うコードを追加してみました。「イメージ」は追加ではありませんが、HTMLコードを編集しています。

quickInsertTemplates.png

 画面上では一行しか見えていませんが、複数行を入力する事も可能です。オプションキーを押しながらリターンキーを押せば改行できるのですが、ここで入力するよりも、テキストエディタからカット&ペーストする方が簡単だと思います。

 AdSenseコードについては説明を省略します。

見出し

 なぜこれが最初から入っていないのか?と思うほど基本的なタグです。私は四段階程度までしか使いませんので、四つ追加しました。
 %cは選択されている文字列を表す様です。文字列を選択しておいて「クイック挿入」メニューから見出し1を実行すると、選択されている文字列がh1タグで囲まれます。

<h1>%c</h1>
<h2>%c</h2>
<h3>%c</h3>
<h4>%c</h4>

ファイル名

 これはCSSファイルでカスタム定義しているものです。薄い赤で、横幅の半分の大きさのボックスです。詳しくはRapidWeaverのテーマをカスタマイズするLinkIconを参照して下さい。

<div id="filename">%c</div>

ソースリスト

 ソースリストを表示する時はcodeタグとpreタグを使っています。

<code><pre>%c</pre></code>

コラム

 これもCSSファイルでカスタム定義しているものです。背景に薄く色を付けたボックス領域を確保する時に使います。

<div id="column">
    <p>%c</p>
</div>

イメージ

 イメージは元から用意されていますが、私はほとんどの場合センタリングして使うので、最初からそれを含めてしまいました。またサイズ指定も追加しています。

<div align="center"> < img src="%c.png" alt="" width="500" height="500" /></div>

HTMLPlugin.nibを編集する

 さてquickInsertTemplates.plistを編集しただけではそれを「クイック挿入」メニューから選ぶ事ができません。そこでこのメニューをカスタマイズするため、HTMLPlugin.nibを編集します。HTMLPlugin.nibをダブルクリックしてInterface Builderを起動して下さい。nibウィンドウのhtmlViewをダブルクリックすると、以下のウィンドウが開きますので、「クイック挿入」ポップアップメニューをダブルクリックして下さい。

htmlView.png

 メニュー項目を追加するにはパレットから"Item"をドラッグしてポップアップメニューにドロップします。区切り線を追加したい時はパレットから区切り線をドラッグしてポップアップメニューにドロップします。

menuItem.png

 quickInsertTemplates.plistに追加したタグをポップアップメニューに追加し、また私にとってはいらないものを削除し、ショートカットメニューを追加したりして最終的に以下の様になりました。ショートカットメニューはRapidWeaverのメニューとぶつからない様にする必要があります。

 例えば見出し1はコマンド+1にしたかったのですが、既に「サイト設定」メニューに使われていたのでF1キーにしました。コマンドキーとアルファベットの組み合わせや、コマンドキーとシフトキーとアルファベットの組み合わせは既に使われているので、コマンドキーとオプションキーとアルファベットの組み合わせを使う様にしています。

quickInsertMenu.png

 以上でカスタマイズ終了です。