2010年07月19日12時00分

ChromeがHTMLエディターに変身! ブログ記事づくりに使えるエクステンションChrome Editorで遊ぼう!!

  • このエントリーをはてなブックマークに追加
  • Pocket

 ブログサービスなどで提供される記事作成機能には、あらかじめ様々なHTML編集機能が付加されている。しかし、そうしたデフォルトの機能で満足できず、自分でウェブ制作ツールを使用してMTMLやCSSを作成しているこだわりユーザーも多いはず。そんな人におススメな拡張機能が『Chrome Editor』だ。

エクステンションChrome Editor:New Tab

 
 Chrome Editorは、ブラウザー上で利用できるHTMLエディターだ。その場で簡単なHTMLファイルを作成したり、イチから新しいHTMLファイルを作成することもできる。どちらかといえば、頻繁に使うHTMLやCSS、JavaScriptコードなどを保存しておいて、ブログなどにコピペするといった用途に適しているだろう。

 
■インストール

 Google Chromeのエクステンション配布サイトにアクセス。サイト上で“Chrome Editor”を検索して、ダウンロードページに進もう。

エクステンションChrome Editor

 【インストール】ボタンをクリックすると【インストールの確認】ダイアログが表示される。【インストール】ボタンをクリックすると数秒でインストールが終了する。

エクステンションChrome Editor

 ブラウザーの再起動なしで拡張機能が使用できる。右上のツールバーにChrome Editorのアイコンが表示されていればインストール完了だ。

 
■インターフェースと注意点

 インストールが完了したらさっそくChrome Editorを使ってみよう。右上のツールバーにあるChrome Editorのアイコンをクリックすると、ポップアップでエディターが表示される。

エクステンションChrome Editor

 
 おもにテキスト入力フィールドの上部にHTMLの編集機能が、下部に保存やチェックなどのファイル関連メニューが配置されている。

エクステンションChrome Editor:インターフェース
Chrome Editoの各種機能。基本的な編集、装飾ができる。

 
 Chrome Editorを使うとき、まず最初に注意すべきことがある。ポップアップを展開した状態で別ページへ移動したり、別のアプリケーションを起動するとポップアップが閉じてしまい、書き込んだデータが消えてしまうのだ。

 ちょっとした誤操作ですべてのデータが消えてしまうので、時間をかけて編集作業をするときは、あらかじめ左下の【NewTab】ボタンをクリックして新たなタブを用意しよう。Chrome Editorを別タブに展開しておけば安心だ。

エクステンションChrome Editor:New Tab


■Chrome Editorを使ってみよう

 Chrome Editorは、簡易ウェブエディターというべきエクステンション。そのため、いわゆるテキストエディターのように、文章をコピペして、編集して、それをファイルに保存する、といった使い方には向かない。
 ブログ記事やHTMLファイルのちょっとした修正を、専用ツールを起動せずにブラウザー上だけで手軽に完結できる点が最大のウリだ。そのため、保存機能もスニペットのように何度もコピペして活用するといった用途に最適化されている。

 試しに何かテキストを書いて【保存】ボタンをクリックしてみよう。

エクステンションChrome Editor:Saveで保存
【Save】で保存する。

 
 すると、下部メニューのさらに下に保存したテキストを表示するフィールドが現れる。このフィールド内のデータは選択してクリップボードに保持することもできるので、そのままコピペに使ったりもできる。

エクステンションChrome Editor

 
■HTMLを作成するには

  それでは、以上を踏まえて実際にHTMLを作成してみよう。まず、追加するテキストをウィンドーに記述する。記述した部分にカーソルを合わせてドラッグして選択し、上部メニュー左から三番目のグループにあるスパナ型のアイコン(DIVタグ)をクリックしよう。

エクステンションChrome Editor

 
 するとDivタグのIDを入力するダイアログが表示される。ここでは、editar_test_01と入力して【OK】ボタンをクリック。

エクステンションChrome Editor

 
 テキスト部分が自動的にDivタグで囲まれて表示される。今回のように、テキストをマークアップするには、テキストをドラッグして選択し、各種ツールアイコンをクリックすることでタグを挿入していく。

エクステンションChrome Editor

 
 テキストをタグでマークアップしたら、先ほど挿入したDivタグの内容をCSSで定義しよう。上部メニュー右から二番目のグループにあるパレット型アイコンをクリックすることで、設定ダイアログが表示されCSSの定義をまとめて設定できる。

エクステンションChrome Editor

 
 後は独自に定義設定していけばよい。設定が終わったら、入力した内容をプレビューしてみよう。プレビューには、上部メニューの一番右端にあるチェック型アイコンをクリックする。
 テキストウィンドーの下にプレビューが表示されるので、内容を確認しながら作業を進めよう。

エクステンションChrome Editor

 
 ほかにも、作成したHTMLの内容がW3Cに準拠しているか確認する機能もある。下部メニューの左から三番目【Validate】ボタンをクリックしてみよう。新規のタブが開き“Markup Validation Service”というウェブサイトにアクセスして、データの内容をチェックできるしくみだ。

エクステンションChrome Editor

 
 また、【Run Highlighter】ボタンをクリックするとコードに行番号が追加され、HTMLタグ部分をわかりやすくカラー表示できる。

エクステンションChrome Editor

 
 機能的には、まだ熟成する余地が多いエクステンションだが、ブログ記事のちょっとした装飾などに大変便利な機能だ。HTML作成の知識があるユーザーなら、ぜひ一度使ってみてほしい。

Chrome Editor
バージョン:0.9.2.6
フリーソフト
作者:Bryan Lynn

(バージョンは記事掲載時のものです)

関連記事

あわせて読みたい

follow us in feedly

最新のニュース

アスキーストア人気ランキング

特集

Comic

アクセスランキング

Like Ranking

BEST BUY

みんなが買っている最新アイテムはこれだ!

Fire タブレット 8GB、ブラック

Fire タブレット 8GB、ブラック

Amazon

8,980円〜

56人が購入

Fire TV Stick

Fire TV Stick

Amazon

3,980円〜

39人が購入

Amazon Fire TV

Amazon Fire TV

Amazon

10,380円〜

11人が購入

Amazon.co.jp