*

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

公開日: : 最終更新日:2013/07/03 WEBDESIGN

特に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

スクリーンショット 2013-06-26 16.45.28

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

スクリーンショット 2013-06-26 16.50.23

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

スクリーンショット 2013-06-26 16.50.49

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

スクリーンショット 2013-06-26 16.52.06

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

簡単に使ってみた感想

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

スクリーンショット 2013-06-26 19.02.41

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

スクリーンショット 2013-06-26 18.56.31

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

Bootstrap を試してみる

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

http://twitter.github.io/bootstrap/
スクリーンショット 2013-06-26 20.49.05

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 のプレビュー画面を見ると…

スクリーンショット 2013-06-26 20.56.52

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

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

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

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

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

スクリーンショット 2013-06-26 21.04.20
http://www.bluegriffon.com/index.php?pages/FireFTP

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

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

スクリーンショット 2013-06-26 21.08.06

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

スクリーンショット 2013-06-26 21.08.52

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

スクリーンショット 2013-06-26 21.09.20

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

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


Sponsored Link


 
 

関連記事

感激しない文章が書けるようになりたい

私には「泣ける」とか「感動する」ような文章を書くことはできません。ちょっとだけ「じわっと」心に滲むよ

記事を読む

2017年1月時点での脱アドビ計画(AFFINITY PHOTO編)

新しくWindowsのノートPCを購入しました。Dellの17インチで10万円程度です。 In

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

小さめな激安楕円レフ板を買ってみた

最近小物の撮影を頼まれることが多くて困ります。写真はほぼ素人なのに。

【Blender】MakeHumanとManuelBastioniLAB

先日書いた 【18禁】Blenderと MakeHumanで美女を3D

DaVinci Resolve 14 のフェイス修正を少し試してみた

Davinci Resolve がベータを外したバージョン14を公開し

動画編集用PCのDavinci Resolve14テスト他

今回組み上がった動画編集用自作PCのその後をいくつか書きます。

【18禁】Blenderと MakeHumanで美女を3D

そろそろ作って遊ぶ3Dアニメのストーリーが固まってきたのでモデリング作

→もっと見る




  •  

PAGE TOP ↑