【Plugin】コンテンツをタブで切り替えできる TabLoom の使い方



RW5.x検証済み
このエントリの内容は RapidWeaver 5.x を使用して検証、カスタマイズされた時のものですが、このバージョンでの動作を保証するものではありませんのでご注意下さい。また、表示の無いバージョンでは動作しない、エラーが出ないという意味ではありません。
タブでコンテンツエリアを切り替えて表示する事ができる TabLoom の使い方を解説します。

使用する前に TabLoom の不具合を修正

やっかいなことですが、そのままではこのプラグインは動きません…。プラグインが格納されているフォルダを開き、TabLoom プラグインのパッケージを開きます。

問題のファイルの場所

/ユーザー名/ライブラリ/Application Support/RapidWeaver/TabLoom.rwplugin

パッケージを開いたら、Resources の中の
js_template.txt をHTMLエディタなどで開きます。

TabLoom.rwplugin/Contents/Resources/
js_template.txt

置換検索で ¥ 記号を \ に全て変更する

js_template.txt を開いたら、置換検索(⌘ キー + F キー)で円記号( ¥ )を全てバックスラッシュ( \ )に変更します。TabLoom version 1.0.1 だと全部で175箇所ありました。
変更が済んだら保存します。
js_template.txt


テーマの変更方法

このプラグインは標準のスタイル以外に外部テーマと呼ばれるものを適用する事が出来ます。

ThemeRoller から テーマをダウンロード

まず、プラグインの右下の緑色のスパナアイコン(インスペクタ)をクリックします。
page-insp-icon

Theme タブをクリックして、ThemeRoller へのリンクをクリックします。
ThemeRoller


ダウンロードの際の注意点

ThemeRoller が開くと、テーマがすぐにダウンロードできます。
下の画像の Gallery タブをクリックすると、既にカスタムされたテーマセットが用意されているので好きなものを選んでダウンロードします。Roll Your Own タブから細かくカスタムする事も可能です。
ThemeRollerギャラリー

ダウンロードする際に以下の事に注意してください。

  • Omponents の所の Deselect all components をクリックして全てのチェックを外す
  • jQuery のバージョンは 1.7.x を選ぶ

この2点です。(試しにチェックをそのままに、jQuery 1.8.x を選んでも動きましたが念のために上記のようにした方がいいでしょう )
ThemeRollerダウンロード

ダウンロードした Theme を適用する

ダウンロードした Theme を解凍したら、フォルダの中にあるダウンロードした Theme の名前のフォルダを任意の場所に移動します。

jquery-ui-1.7.3.custom/css/
ダウンロードした Theme のフォルダ

TabLoom のインスペクタを開いたら、Theme タブの ThemeRoller Settings にチェックを入れ、先ほどのフォルダを選択します。
テーマのフォルダを選択します

プレビューすると先ほどのテーマが適用されていると思います。後は General タブを適当にごにょごにょして完成です。


ページ公開後にテーマが外れていたら

ページを公開した後に、ブラウザでCSSが機能していない場合は、サーバーにアップされた tabloom.js の ¥記号を、最初の方で解説したようにバックスラッシュに全て置換してください。

TabLoom ページのフォルダ/files/
tabloom.js

これを編集します。


RapidWeaver を再起動したらテーマが標準に変わっていた

後日検証しましたら、再起動後にテーマが標準に戻り、何度試してもテーマを変更する事が出来ませんでした…。
こうなったら、プラグインを再インストールして再び
js_template.txt を編集するしかないのですが、以下の方法で対処できました。

ダウンロードしてきた Theme の CSS ファイルをHTMLエディタなどで開き、CSS のソースをすべてコピーして TabLoom のCSS タブにペーストすれば大丈夫でした。
気軽に Theme を変更できないのは残念ですが取りあえずの対処法としてこれ以外の方法はないようです。

jquery-ui-1.7.3.custom/css/ダウンロードした Theme のフォルダ/jquery-ui-1.7.3.custom.css

このファイルを開いてソースすべてをコピーし、以下にペーストします。(青くハイライトされた部分)
TabLoom CSS
blog comments powered by Disqus