Dreamweaverの代わりになるのか？HTML5 CSS3対応HTMLエディターBlueGriffonを試す

特にFTPわまりで不具合の多い Adobe Dreamweaver の代替えソフトとなるのか？「BlueGriffon」という無料ソフトを見つけたので試してみます。MacもWindowsもLinuxも対応しているようです。

概要とダウンロード

BlueGriffon は「The next-generation Web Editor based on the rendering engine of Firefox」というコピーにある通り、FireFoxをベースにした次世代エディターです。かっこいい。基本は無料のオープンソフトですが、サポートや追加機能は有料販売されているようです。

http://bluegriffon.org/pages/Download

対応OSは上図の通り。今回はMacでのインストールを試します。この記事を書いている段階でバージョンは1.7.2です。

ダウンロードしたファイルをダブルクリックでインストールを開始します。インストールはマウントしたファイルをアプリケーションフォルダにドラックするだけ。

容量120M程度なのでスグにコピーが完了します。さっそく起動。若干画面が出てくるまで時間がかかるけど、無事に起動しました。そして既に日本語になっています。

画面デザインは洗練されていて好印象です。上に並ぶアイコンが若干ガチャガチャしていて、もう少しシンプルにデザインして欲しかったけど、全体的にはカッコイイと思います。

簡単に使ってみた感想

CSSの外部ファイル編集などは別売の追加機能が必要になっているようです。11.5ユーロなので1,500縁前後でしょか？ある程度使い込んでみて本格的に使えると判断した場合は購入してみようかと思っています。

追加購入しなくてもソースに直接書かれるCSSを手動で外部に移動させれば問題無さそうです。

なによりCSSの設定をビジュアルに指定できるのは便利です。

Bootstrap を試してみる

レスポンシブデザインがマイブームなので Bootstrap の対応具合を試しておきます。

http://twitter.github.io/bootstrap/

HTMLはサンプルの「Fluid layout」を使います。HTMLソースは次のURLからソースを表示してコピー・ペーストしてみました。

http://twitter.github.io/bootstrap/examples/fluid.html

そしてソースのリンクを修正します。具体的にはCSSファイルへのリンクを修正しただけです。

<link href="./css/bootstrap.css" rel="stylesheet">

<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<script src="./js/html5shiv.js"></script>

以上の状態で BlueGriffon のプレビュー画面を見ると…

かなり忠実に再現されているようです。これは使えそうですね。

その他使い勝手を良くする設定

標準でFTPが無いようなので検索で探してみると、次のURLに素晴らしい内容が記載されていたので勝手に紹介させていただきます。

BlueGriffon をインストールしたら最初にやっておきたい7箇条
http://dirtysexyquery.blogspot.jp/2012/06/7-things-to-do-after-installing.html

公式ページで色々なアドオン（機能拡張）が紹介されています。そのかかから上記URLでも紹介されている無料の「FireFTP」をダウンロードして見ることにしました。

http://www.bluegriffon.com/index.php?pages/FireFTP

画面右側の緑色のダウンロードボタンを押すと「fireftp-2.0.14-bluegriffon.xpi」というファイルがダウンロードされます。

メニューの「ツール」から「アドオン」を選択。画面上にある歯車マークをクリックするとメニューが出ます。

ファイルからアドオンをインストールでファイル選択画面が開きます。

インストールして再起動すれば「ツール」メニューに「FireFTP」が表示されています。

起動されるとよくあるFTP画面です。左上の「アカウントの作成」で設定ができます。

簡単に使っている範囲では動作も早く安定していました。不具合らしい動きは一度もありませんでした。なかなか良さそうですね。