RapidWeaver の使い方・メモ

Published by Hideyuki, February 3rd, 2017

RapidWeaver を Setapp で使えるので、サイト制作に導入することにしました。情報源が英語しかないので、分からなくなったときのためにメモしておきます。

似顔絵サイトを新しく作るのにカラーミーショップで作るつもりでいたんだけど、あまりうまくいきませんでした。

カラーミーにアクセスして、分かりにくい文字の羅列をかいくぐり、さらに多すぎるフォームを前にして、型番なんかをつけたりしなきゃいけない。
クレジットカード決済とかもややこしいし、それなりに月額料金を取られるのは馬鹿らしい。
そのお金を Setapp にをまわしたかったので、カラーミーショップは止めて思い切って RapidWarver でいくことにしました。

RapidWeaver を採用する理由

Setapp のおかげで安価で利用できる
アプリなので直感的。日々の更新が簡単
静的サイトとして書き出されるので、表示が高速
書き出される HTML がキレイ
Publish を押したら、サーバーにアップされる手軽さ
メールフォームが内蔵されている
テーマによるけど、レスポンシブデザインなフレームワークを使える

とても大切なテーマの改造について

ThemeFlood というサイトで Minalicious というテーマを無料で購入できた。paddle という決済システム経由でのダウンロードになるけど、無料だった。

仕事が順調に入ってくれれば、テーマやアドオンを買い足すという選択肢も生まれる

Preferences > Addons > Reveal in Finder をクリックすると、Finder にアドオンがあるファイルが表示される。Themes フォルダに入ってテーマファイルを選択、右クリックして「パッケージの内容を表示」を選ぶと HTML や CSS が入っているので、ここをいじればテーマのカスタマイズができる。

しかも、リアルタイムに RapidWeaver 側で反映される
テーマを本格的にカスタマイズする前に、テーマファイルをバックアップした方が良い。
毎回、Preferences から入っていたら時間がかかるので、テーマファイルへのショートカットをドックなりお気に入りのランチャーなり、どこかに作っておくと良い

CSS を編集するだけであれば、テーマファイルを下手にいじらずに標準でついているカスタム CSS の機能を使って上書きしたほうが良い。サイドバーの Code > CSS に CSS の記述を追加していけば良い

ちなみに、プレビューで要素を右クリックして Inspect Element を押すと、CSS の指定名称がわかるので、HTML 上でダブルクリックしてコピペすれば良い
個々のページの Inspector にある CSS 欄に記述すれば個々のページの CSS を上書きできる。ぼくは使わない。

テーマを改造したら、テーマファイルのアイコンをダブルクリックして、テーマをインストールし直す必要があるのかもしれない。

HTML が記述できる

Add から普通に HTML Code を追加できる
Bootstrap に準拠して HTML を記述すれば、キレイなレスポンシブデザインのサイトを作れる！
RapidWeaver-Bootstrap-Snippets をダウンロードして RapidWeaver に入れておけば、簡単に Bootstrap のタグを入力できる！

RapidWeaver の Tips メモ

Add で使いするページに Styled Text を選ぶと、font タグが HTML にたくさん入ってしまい上手くいかない。Markdown を選んだほうが HTML がキレイになる。

画像を入れたい場合も Markdown で記述する。まず使う画像を Resources にドラッグしてストック。 Markdown 記法で画像を指定する。 ![alt](画像URL) が画像の記法。画像を選択して Copy Macro を押してから、画像 URL 部分に貼り付ければ OK！

Ver 7 からの機能だけど File > Precview Page in... で、ブラウザでプレビューできる。しかも、更新がライブで反映される。
View > View Source で HTML ソースをチェックできる。ここから編集することはできない。
Offsite page を使えば、メニューに外部リンクを置ける。URL は Inspector のオプションに書く欄がある。ぼくはこの機能を使って、ブログだけ、このサイトへのリンクを貼ることにした。
アクセス解析も設置できる。サイドメニューから Code > Head を選択して、そこに Google Analytics のコードを貼れば良い。ぼくの場合は Piwik のコードを貼る。
RapidWeaver からロゴを入れ替えたのにブラウザ上で変わらない場合、キャッシュが残っているから。ファイル名を変えてロゴを入れ替えれば確実にすぐに表示される。
アクセス解析の Piwik が大量のアクセスを誤認識していた。RapidWeaver でプレビューする度にアクセス解析に読みこまれていたようだ。Offsite Page で一時的に Piwik の URL に飛ぶようにしてから、Piwik でクッキーを使って除外にすれば OK！
Publish して 403エラーが出るようなら、ファイルを少し修正してもう一度 Publish すれば案外いけたりする。
公式のビデオチュートリアルは有料会員にならないとほとんど見れない

Getting Started と New Features in RapidWeaver 7 のカテゴリーの動画は無料で閲覧できた

似顔絵のご注文は、RapidWeaver で作成したサイト「にすぎや」にて承っています。