【コラム】

イマドキのIDE事情

124 HTML5/CSS3対応エディタ「BlueGriffon」を試してみる

竹添直樹  [2012/02/16]

124/174

BlueGriffonとは?

BlueGriffonはFirefoxに搭載されているGeckoエンジンを使用したHTMLエディタで、NvuやKompoZerといったGeckoベースのHTMLエディタの後継にあたる。ソースコードとWYSIWYG編集を切り替えながら編集を行うことができる。最大の特徴は、HTML5やCSS3に対応しているという点だ。

図1 : BlueGriffonのWebサイト

BlueGriffonはマルチプラットフォームで動作し、WebサイトのダウンロードページにはWindows、Mac、Ubuntu用のインストーラが用意されている。Webサイトは英語のみだがインタフェースは最初から日本語に対応している。

BlueGriffonを使ってみよう

実際にBlueGriffonの機能を見てみよう。まずはHTMLの作成時に「ファイル」メニューの「新規作成ウィザード」で使用するHTMLのバージョンなどを指定してHTMLを作成できる。

図2 : 新規文書ウィザード

BlueGriffonはいわゆるタブ型のエディタで、複数のHTMLをタブを切り替えながら編集することができる。また、ウィンドウの下側に配置されているトグルボタンでHTMLのソース編集とWYSIWYG編集を切り替えることができる。

図3 : BlueGriffon(WYSIWYG編集)

図4 : BlueGriffon(ソース編集)

WYSIWYG編集時は画面上部のツールバーからリンクや画像、表などの挿入やスタイルの選択を行うことができる。ツールバーにはHTML5のvideo、audio要素を挿入するためのボタンも用意されている。また、「表示」メニューの「All Tagsモード」を選択することで画面上にタグの位置を表示することができる。

ソース編集時はHTMLの強調表示が可能なほか、閉じタグの欠落といったフォーマットのチェックを自動的に行ってくれる。また、「ツール」メニューの「HTMLマークアップの整理」で冗長なHTMLのクリーンアップも行うことができる。

ただし、一般的なIDEのような入力補完機能は備えておらず、エラーチェックに関してもフォーマットチェックのみでHTMLの要素名や属性名の誤りといった部分まで指摘してくれるというわけでもない。必要最小限の編集機能のみが提供されているという印象だ。

CSSの編集

CSSは直接ソースを編集するほか、「パネル」メニューの「スタイル プロパティ」で表示されるフローティングウィンドウからGUIで指定することもできる。角丸、グラデーション、ドロップシャドウなどCSS3に対応したプロパティも設定可能でWYSIWYG画面で実際の表示を確認しながらパラメータを調節できる。

図5 : スタイルプロパティパネル

ただし、筆者の試した環境(Windows7 64bit版)ではフローティングウィンドウがBlueGriffon本体のウィンドウの後ろにいってしまうことがあり、操作性に難ありと感じた。

SVGエディタ

BlueGriffonの特徴として、標準でSVGエディタを搭載しているという点が挙げられる。ただし、これはBlueGriffonの独自機能というわけではなく、Webブラウザ上で動作するsvg-editというSVGエディタを組み込んだものだ。

図6 : SVGエディタ

作成したSVGはファイルとして保存することもできるし、ソースを表示することもできるのでコピーしてBlueGriffonで編集しているHTMLに貼り付けてもいいだろう。

アドオンで機能を追加する

ここまで見てきたように、BlueGriffonはかなりシンプルなエディタだ。一般的なWebオーサリングツールでは当たり前の機能とも言えるスニペット機能(任意のコード断片を登録しておき再利用するための機能)やWebサイトの管理やサーバへのアップロードを行うための機能なども存在しない。

BlueGriffonではこういった機能は有償のアドオンとして追加できるようになっている。アドオンはこちらのサイトで販売されており、プロジェクトを管理するためのものや、強力なCSSエディタなどが提供されている。

図7 : アドオンのサイト

まとめ

BlueGriffonはHTML5 / CSS3への対応を謳っているものの、HTML5やCSS3に特化した機能がさほど充実しているというわけではない。また、アドオン販売が行われているためか、本体の機能がかなり限定されている点も気になるところだ。

とはいえ、前身であるNvu / KompoZerで感じたユーザインタフェースの野暮ったさもなく、HTML5 / CSS3に対応したプレビュー可能なテキストエディタと割り切れば逆にシンプルで使いやすい。リアルタイムにプレビューを行いながらCSSを編集することができるのでCSS3の機能を試すにもいいだろう。

124/174

インデックス

連載目次
第174回 Microsoftのプログラミング向けエディタ「Visual Studio Code」に注目!
第173回 Mac用Gitフロントエンドの老舗「Tower2」の実力は?
第172回 GitHub Desktopとは?
第171回 Github製の次世代テキストエディタAtomをチェック!(3)
第170回 Github製の次世代テキストエディタAtomをチェック!(2)
第169回 Github製の次世代テキストエディタAtomをチェック!(1)
第168回 IDEで試すJava8、Eclipse/NetBeans/IntelliJ主要IDEの対応状況
第167回 手軽に導入!JS Test DriverでJavaScriptをテストしてみよう
第166回 Firefox OSアプリを簡単に開発できる「AppMaker」とは?
第165回 GoogleからHTML5オーサリングツールが登場!「Google Web Designer」
第164回 OSS化されたPython IDE、JetBrainsのPyCharmを使ってみよう
第163回 「MarkdownPad」Windowsで使える高機能Markdownエディタ
第162回 手軽に設置できるGithubクローン「GitBucket」を使ってみよう
第161回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(4)
第160回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(3)
第159回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(2)
第158回 JavaEE7対応! Eclipse 4.3 Keplerの新機能を探る(1)
第157回 SeleniumでWebアプリケーションのテストを自動化しよう
第156回 新たなAndroid用IDE、IntelliJベースの「Android Studio」登場!
第155回 様々な言語、PaaSに対応! 注目を集めるWeb IDE「Codenvy」とは?
第154回 簡単デプロイ!「Gitblit」で共有Gitサーバを手軽に構築
第153回 Groovyベースのビルドツール「Gradle」をEclipseで使ってみる
第152回 最強のGitクライアントがWindowsにやってきた!「Atlassian SourceTree」
第151回 メモからプログラミングまで!? Android上で動作するテキストエディタたち
第150回 HTML5にも対応! Web開発環境としてのNetBeans 7.3
第149回 スマートフォン向けの新OS! Firefox OSアプリを作ってみよう
第148回 EclipseのJavaScriptエディタでjQueryを使用する
第147回 グラフィカルなログビューアでログを手軽に分析してみよう
第146回 JavaScriptの問題点を解決できるか? Chromeで試すCoffeeScript
第145回 タッチでWebアプリ開発!「TouchDevelop」が見せるタッチデバイスの可能性
第144回 VMwareがOSSで公開したJavaScriptエディタ「Scripted」を試してみよう
第143回 今話題の高機能テキストエディタ「Sublime Text 2」その人気の理由は?
第142回 「Github for Windows」でGithubをはじめてみよう!
第141回 次世代JavaScript? Microsoft発の新言語TypeScriptをIDEで試してみる
第140回 Bootstrapを使ったUIを簡単に作成できる「Jetstrap」
第139回 ブラウザ上で動作するreStructredTextエディタ「NoTex」
第138回 JavaScriptを最適化! Closure Compilerを活用しよう
第137回 Travis CIとBuildHive、オンラインCIサービスを活用しよう
第136回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(3)
第135回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(2)
第134回 大幅リニューアルで気分一新! Eclipse 4.2 Junoリリース(1)
第133回 e(fx)clipseでJavaFX 2を試してみよう!
第132回 CSSの作成を効率化! EclipseでLESSを編集するためのプラグイン
第131回 Adobe製のオープンソースHTMLエディタ「Brackets」を試してみよう
第130回 「Initializr」でHTML5サイトのテンプレートを作成しよう
第129回 リポジトリ管理ツール「Nexus」でMavenをさらに活用しよう!
第128回 「Codiqa」でjQuery MobileのデザインをWYSIWYG編集!
第127回 JetBrainsの新言語「Kotlin」をWebブラウザで試してみよう!
第126回 ついに登場! Android上で動作する開発環境「AIDE」
第125回 周辺ツールでGitHubをさらに活用しよう
第124回 HTML5/CSS3対応エディタ「BlueGriffon」を試してみる
第123回 WebアプリからEclipseプラグインまで、様々なMongoDBフロントエンド
第122回 「Ceylon IDE」でJavaベースの新言語Ceylonを試してみる
第121回 Scala開発はEclipseに決まり? 「Scala IDE for Eclipse 2.0」登場
第120回 EmacsライクなWindows用テキストエディタ「xyzzy」
第119回 Eclipseベースの帳票作成ツール「JasperWave」
第118回 Eclipse発の新言語「Xtend」を試してみよう!
第117回 HTML5/CSS3アニメーションをグラフィカルに作成できる「Sencha Animator」
第116回 高機能なWindows用SQL開発環境「A5:SQL Mk-2」
第115回 高機能なプログラマ向けテキストエディタ「Notepad++」
第114回 Padre - Perlで書かれたPerl開発者向け軽量IDE
第113回 デスクトップ&Webで動作するR言語の統合開発環境「RStudio」
第112回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(5)
第111回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(4)
第110回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(3)
第109回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(2)
第108回 今年のEclipseは新機能満載! Eclipse 3.7 Indigo(1)
第107回 eBay Open Sourceの「VJET JavaScript IDE」を試してみる
第106回 ユニットテストを支援するEclipseプラグイン
第105回 Spring Frameworkを強力サポート! 「SpringSource Tool Suite」
第104回 JavaSE 7対応! NetBeans 7.0の新機能を試してみる
第103回 Scalaプログラミングなら「IntelliJ IDEA Community Edition」
第102回 Google ChromeのDeveloper Toolsを使いこなそう
第101回 App InventorでAndroidアプリをビジュアル開発!
第100回 GWTもビジュアル開発! 無償化されたGWT Designerを使ってみよう
第99回 Web IDEの本命か? Eclipse Orionを試してみる
第98回 HTMLを高速コーディング! Zen CodingをEclipseで使ってみる
第97回 JavaScriptライブラリClosure Libraryを手軽に試せる"Closure Kitchen"
第96回 Cloud9 IDE - node.jsで動作するWebベースのIDE
第95回 Rubyで開発された多機能テキストエディタ「Radcar」
第94回 最強のJavaScript IDE「WebStorm」を試してみる
第93回 分散バージョン管理システムMercurialを使ってみよう
第92回 これが定番! ソフトウェア開発に便利な小物ツール集
第91回 Eclipseベースの統合翻訳環境「Benten」を使ってみよう
第90回 かんばんアプリ「JAM Circle」でタスク管理!
第89回 FlexdPMDでActionScriptのコードをチェックしてみよう!
第88回 e4とEclipse 4.0、次世代のEclipseに触れてみる
第87回 今年もEclipseの季節がやってきた! Heliosの新機能(3)
第86回 今年もEclipseの季節がやってきた! Heliosの新機能(2)
第85回 今年もEclipseの季節がやってきた! Heliosの新機能(1)
第84回 JavaScriptもユニットテスト! JsUnitを使ってみよう
第83回 HTTPモニタでHTTP通信を覗いてみよう!
第82回 NetBeans 6.9 betaで次期NetBeansの新機能に触れる
第81回 EclipseでClojureプログラミング! Counterclockwiseを試してみる
第80回 .NET/PHP対応! オンラインIDE CodeRun Studio
第79回 Java VMの監視/障害解析に役立つツール
第78回 Small Basicで簡単BASICプログラミング!
第77回 携帯Webアプリ向け開発ツールのまとめ
第76回 NetBeansでJavaFX Composerを使ってみよう!
第75回 オープンソースのHTMLエディタKompoZerでWebオーサリング!
第74回 高機能なGroovy開発環境「Groovy-Eclipse 2.0」リリース!
第73回 高機能ERモデリングツール「ER Master」でデータベース設計!
第72回 EclipseでAndroidアプリケーション開発!
第71回 JavaEE 6対応! 最新IDE NetBeans 6.8の新機能
第70回 Webサービスのテストツール「SOAP UI」をEclipseで使ってみよう
第69回 ついにオープンソース化されたIntelliJ IDEAを使ってみよう!
第68回 マルチブラウザ対応Webサイト制作ツール「Pirka'r」を試してみる
第67回 オープンソースのFlashデバッガ「De MonsterDebugger」を試してみる
第66回 分散バージョン管理システムGitのGUIフロントエンド
第65回 MicrosoftのAjax高速化ツールDolotoを試してみよう!
第64回 Eclipseのキーバインドをvi/Emacs風にカスタマイズしよう
第63回 マルチブラウザ対応のJavaScriptデバッガ「JSDT」を試してみよう!
第62回 Flex MonkeyでFlexのUIテストを自動化しよう
第61回 Maven、Kenai、Hudsonをサポート! NetBeans 6.7の新機能
第60回 Swing用Eclipseプラグインの決定版! Visual Swing for Eclipse
第59回 Eclipse 3.5 Galileoリリース! 新機能をチェック
第58回 Rails向けのWindows用軽量IDE「RoRED」を試してみる
第57回 PyScripter - 軽快動作のWindows向けPython開発環境
第56回 Bespin - Webベースの統合開発環境の可能性を探る
第55回 デバッグも可能なビジュアルAIR開発環境「AIR GEAR」を使ってみよう
第54回 Google App EngineがJava対応! Google Plugin for Eclipseで開発
第53回 WebLogic対応! Oracle Enterprise Pack for Eclipse 11gを探る
第52回 EclipseでGitを使おう! EGitを試してみる
第51回 無償ではじめるSilverlight開発環境
第50回 Soyatec eFace - JavaでXAMLを使おう
第49回 グラフィカルなデータベースフロントエンド
第48回 KodersとKrugleでOSSのソースコードを検索!
第47回 XMindでマインドマップを描いてみよう!
第46回 JetBrainsのRuby IDE「RubyMine」を試してみる
第45回 IntelliJ IDEA 8.0が登場! Groovy/Flex等のサポートが強力に
第44回 クラウドサービスとも連携! Aptana Studio最新版を試してみよう
第43回 CIツールとIDEの連携 - EclipseからHudsonを利用する
第42回 EclipseでMavenを使おう
第41回 Eclipseの編集機能を強化するプラグイン
第40回 Groovy/Grailsもサポート! NetBeans 6.5ベータ版を試してみる
第39回 Wicket、Grails、Click - IDEでみる軽量Javaフレームワーク
第38回 待望のバージョンアップ! Eclipse 3.4 Ganymede(4)
第37回 待望のバージョンアップ! Eclipse 3.4 Ganymede(3)
第36回 待望のバージョンアップ! Eclipse 3.4 Ganymede(2)
第35回 待望のバージョンアップ! Eclipse 3.4 Ganymede(1)
第34回 Eclipseのショートカットを使いこなそう
第33回 これが定番! オープンソースのEclipseプラグインリスト
第32回 NetBeansでPHP開発! 6.1のEA版を試す
第31回 退屈な作業を自動化! Eclipse Monkeyを使ってみる
第30回 ついに登場! NetBeans 6.1の新機能
第29回 EclipseでScalaプログラミング!
第28回 IEで利用可能なJavaScriptデバッグツール
第27回 Eclipse 3.4 Ganymedeの新機能
第26回 JBoss ToolsでSeam開発!(2) - Seam開発をサポートする機能
第25回 JBoss ToolsでSeam開発!(1) - 便利なオールインワンインストーラが登場
第24回 ちょっと便利なEclipseプラグイン
第23回 Windowsで利用可能なテキストエディタ
第22回 LinuxのIDE事情 - Linuxで利用可能なオープンソースIDE
第21回 Eclipseをオンデマンドで利用するためのサービス
第20回 無償で利用可能な.NET統合開発環境
第19回 Silverlightにも対応したSpket IDE
第18回 オープンソースのFlash開発環境
第17回 軽量Java IDE "JCreator"を試してみる
第16回 Java製高機能テキストエディタ"jEdit"を使ってみよう
第15回 EclipseのGUIアプリケーション開発事情
第14回 進化するMylyn - Mylyn 2.0の新機能
第13回 Adobe AIRにも対応! Flex Builder 3
第12回 JBoss Tools - Exadel Studioがオープンソース化
第11回 Seasar2をサポートするEclipseプラグイン
第10回 Spring 2.0にも対応! "SpringIDE 2.0"
第9回 RailsやAIRもサポート! WebIDE Aptana
第8回 Eclipse/NetBeansでJavaFXスクリプティング!
第7回 さまざまなLLに対応した軽量IDE"KomodoEdit"
第6回 EclipseでPHP開発! PHP Development Tools
第5回 もうひとつの無償IDE - "Oracle JDeveloper"を試してみる
第4回 Eclipseでもオールインワン - さまざまなEclipseディストリビューション
第3回 Eclipseを追い越せ! NetBeans 6.0
第2回 Eclipse 3.3の新機能
第1回 Java IDEの二大巨頭"Eclipse"と"NetBeans"を比較する

もっと見る



IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

藤原竜也、洋画実写吹き替え初挑戦! 続『インデペンデンス・デイ』主人公役
[04:00 5/25] エンタメ
舞台「ダイヤのA」は薬師戦!真田役は上田堪大、栄純・降谷・御幸は続投
[00:00 5/25] ホビー
アニメ「orange」橋の上で空を見上げるメインキャラ6人のビジュアル
[00:00 5/25] ホビー
「聲の形」の大今良時、今秋にファンタジー新連載開幕!マガジンに予告
[00:00 5/25] ホビー
[浅田真央選手]姉・舞とNMB48冠バラエティーに出演 号泣するメンバーも
[00:00 5/25] エンタメ

特別企画 PR

求人情報