更新情報
広告
PRサイト
関連サイト
< 2007/9/15 >

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

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

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

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

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

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

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

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

Localizable.stringsを編集する

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

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

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

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



quickInsertTemplates.plistを編集する

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

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

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

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

見出し

なぜこれが最初から入っていないのか?と思うほど基本的なタグです。私は四段階程度までしか使いませんので、四つ追加しました。

%cは選択されている文字列を表す様です。文字列を選択しておいて「クイック挿入」メニューから見出し1を実行すると、選択されている文字列がh1タグで囲まれます。

見出し1
<h1>%c</h1>
見出し2
<h2>%c</h2>
見出し3
<h3>%c</h3>
見出し4
<h4>%c</h4>

ファイル名

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

ファイル名
<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をダブルクリックすると、以下のウィンドウが開きますので、「クイック挿入」ポップアップメニューをダブルクリックして下さい。

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

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

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

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



ページの先頭へ戻る