Bracketsは、HTML手打ちの救世主

2020-06-30, 2020-06-17

無料のテキストエディタであるBracketsは、各種支援機能が充実しており、手打ちHTMLを効率化してくれます。Emmet(省略記法)、Beautify(自動整形)などの拡張機能を使えば、さらにコード編集が高速化されます。

HTML手打ちとは?

HTML手打ち vs CMS

HTML手打ちは、ウェブサイトの言語であるHTMLのタグ等のコードをルールに従って手打ち入力し、HTMLファイルを作成する方法を指します。対となる言葉に、CMS(コンテンツマネージメントシステム)があります。HTML手打ちは自力でコードを打ち込んで作成しますが、CMSはコードをシステムが自動で生成します。

はっきり言って、HTML手打ちは廃れつつある手法です。今やウェブサイトのほとんどは、誰でも簡単に使えるCMSで作成されており、手打ちHTMLは学習コストも高く非効率で出番は少ないです。恐らくプログラミング未経験者でこれからサイトを立ち上げようという方は、HTML手打ちを選択されないと思います。

HTMLファイルを掌握するなら手打ち

もし、自分のサイトに使用されているHTMLタグ等をしっかり把握したい場合は、HTML手打ちをお進めします。CMSが何をしているのか分からなくて不安、CMSが吐き出すHTMLのソースコードに不要なものが多すぎて辟易する、といった髭犬も感じた不快感をお持ちの方は、HTML手打ち派の素質ありです。

髭犬は、あるときWordPressに見切りをつけ、わざわざHTML手打ちに切り替えました。自分のサイトのHTMLをしっかり把握、管理したかったからです。静的サイトにして、サーバー費用を抑えたかったという意図もありました。今となってはその判断は正しかったと考えています。

ただ、完全な手打ちは非効率なので、髭犬は支援機能満載の専用エディタBracketsを使っています。本記事では、そのBracketsについて、有用なプラグインも含めて紹介します。

Bracketsは機能満載の無料のHTMLエディタ

Bracketsとは?

Bracketsは、Adobeが開発した、HTML、CSS、Javascriptに特化した、無料のエディタです。HTMLエディタとしての標準的な機能であるタグやパラメーターの色付け、パラメーター候補の表示の他に、ライブプレビューやホバークイックビューなど便利な機能もあります。また、高機能でありながらも軽量ですので、さくさく動作します。特に難しい設定等もなく、初心者でもすぐに使えます。

なお、"brackets"の元々の意味は括弧です。HTMLタグ等の括弧に由来したソフトウェア名です。

Bracketsの素晴らしい機能

髭犬が特に便利と感じているBracketsの機能を紹介します。

ライブプレビュー

HTMLコードに変更を加えると、その結果をブラウザーでリアルタイムに表示させることができます。見栄えをその場でチェックしながら、コードを打てるようになりますので、ミスに素早く気づくことができます。

また、ライブプレビュー側の各ブロック要素を選択すると、Brackets側の該当コード部分に移行します。この機能により、修正が素早く行えます。その逆のライブプレビューハイライトという機能もあります。これは、Brackets側のコード部分を選択すると、ライブプレビュー側の該当箇所がハイライト表示されるものです。これら双方向的な対応箇所の強調機能により、編集がとても捗ります。

ホバー・クイックビュー

イメージファイルのパスがあれば、そのプレビューを表示してくれます。これで、実際の画像を確認できるので、画像の取り違えを防げます。また、その画像の縦横の寸法も表示してくれるので、"width"や"height"の値の入力時に参照することができ、とても便利です。

各種候補表示

候補となるファイルやパラメーターの一覧を表示してくれます。例えば、画像のように、"src"であれば、フォルダ内のファイルやサブディレクトリの一覧が確認でき、選択により入力されます。この入力支援により、ファイル名やパラメーター名を完全に覚えていなくても、何とかなります。

分割表示

2つのファイルを、左右または上下に分割して同時に表示・編集できます。上階層のまとめ記事との同時編集などに活用できます。

なお、同じファイルも分割表示できます。この場合、片方の編集がもう片方にもリアルタイムで反映されます(同じファイルなので当たり前ですが)。

ファイルを横断して置換

Bracketsには2種類の置換があります。開いているファイル内の該当文字を検索して置換する、という普通の置換。そして、開いているフォルダ内のすべてのファイル内の該当文字を検索して置換する、というファイルを横断した置換です。

後者については、HTMLのルートディレクトリを開いておけば、サイト内のファイルすべてを対象として、検索・置換してくれます。ウェブサイト内に散らばった特定文字を検索して一括で置換したい場合に活用できます。

なお、置換が必要ない場合は、横断検索というのもあります。

ダークモード

目が疲れにくくなるダークモード表示にも対応しています。デフォルトはライトモードですが、ダークモードに切り替えた方が無難です。紙とは異なり、ディスプレイは発光しているので、できるだけ光が目に入らないようにした方が良いです。照明を何時間も眺める人はいませんよね?

Bracketsの有用ショートカットキー

Bracketsを爆速でコーディングするために、ショートカットキーをある程度覚えておくと便利です。キーボードショートカットは沢山あって覚えきれないのですが、以下、髭犬が頻繁に使うショートカットキーを紹介します。

ファイル関係

髭犬は、ルートディレクトリを開いた状態にしています。こうしておくと、ウェブサイト全体のフォルダやファイルがサイドバーに階層表示されます。そして、階層を移動して、目的のファイルをクリックすれば、開くことができます。また、サイトに使用されているすべてのファイルを横断して、検索・置換できます。

そのため、ファイルを開くのは、基本的にサイドバーからです。または、「最近使用したファイルを開く」からですね。保存や閉じるは、すべてのファイルに対して適用させるショートカットキーも存在しています(髭犬は覚えていません)。

機能 ショートカットキー
最近使用したファイルを開く Alt+O
保存 Ctrl+S
閉じる Ctrl+W

編集

基本のショートカットキーです。

機能 ショートカットキー
取り消し Ctrl+Z
やり直し Ctrl+Y
カット Ctrl+X
コピー Ctrl+C
ペースト Ctrl+P

行に対する編集キーも一通り覚えておくと便利です。行については、表示から「アクティブな行をハイライト」しておくとよいでしょう。

カーソル位置から選択範囲を広げる時は、HomeEndでカーソルを先頭または末尾に移動してから行います。なお、複数行にまたがって選択範囲を広げたときは、「選択範囲を行にする」必要があります。

機能 ショートカットキー
行の選択 Ctrl+L
カーソル位置から上を選択 Shift+
カーソル位置から下を選択 Shift+
選択範囲を行にする Ctrl+Shift+L
(複数)行を上に移動
(上の行と入れ替え)
Ctrl+Shift+
(複数)行を下に移動
(下の行と入れ替え)
Ctrl+Shift+
(複数)行を複製 Ctrl+D
(複数)行を削除 Ctrl+Shift+D

ライブプレビュー関係

ライブプレビューのホットキーはよく使います。ライブプレビューハイライトという機能も常時使用していますが、呼び出すキーは覚えていません。

機能 ショートカットキー
ライブプレビュー Ctrl+Alt+P

Bracketsの有用な拡張機能

Bracketsの標準機能では物足りない場合は、豊富なプラグインがありますので、必要に応じて利用しましょう。髭犬は、EmmetとBeautifyを使っています。

Emmetの省略記法活用で入力時間を短縮

HTMLタグ等を素早く入力するために、省略記法というものがあります。Emmetはその省略記法の1つです。その記法(チートシート参照)は無数にあるため、すべてを覚えることはとてもできないです。ただ、以下の基本を抑えておくだけで、タグ入力に必要な文字数が劇的に減り、コード作成が効率化されます。

Tabでコード展開

省略された要素を入力後に、Tabを打てばタグの追加などが行われてコード展開されます。タグが追加されるだけでなく、パス等の必須属性の入力部も補完されます。

省略要素 展開後
h2 <h2></h2>
p <p></p>
a <a href=""></a>

これを覚えているだけで、タグの括弧入力から解放されます。髭犬は、HTML手打ち派ですが、タグに必須の"<"と">"をほとんど手打ちしません。

"{}"で文字入力

文字を開始、終了タグで挟み込みたいなら、以下の例のように、要素の後に"{文字}"を追加します。

省略要素 展開後
h2{見出し2} <h2>見出し2</h2>
a{こちら} <a href="">こちら</a>

髭犬は、入力後の文字をタグで囲む時によく使っています。Homeで文字の先頭に移動して"タグ要素{"を入力し、Endで文字の末尾に移動して"}"を入力してTabで展開します。

".", "#"でスタイル(class, id)付与

スタイルを指定して要素展開できます。classは".", idは"#"で、スタイルシートと同じ指定記号です。例を確認ください。

省略要素 展開後
div.style <div class="style"></div>
div#style <div id="style"></div>

要素間の関係を表す演算子

各タグ要素間の関係を表す演算子があります。主要なものは、以下の表の通りです。

要素間の関係 演算子
Child >
Sibling +
Climb-up ^
Grouping ()
Multiplication *

例えば、上表のすべての演算子を使えば、複雑になりがちな表のタグ入力も一行でできます。以下の省略記法と展開後のコードの対応をご覧下さい。このレベルの省略記法が、自分ですらすら入力できるようになると、表の挿入が煩わしくなくなります。

div>table>tr>th*3^(tr>(th+td*2))*3

<div>
    <table>
        <tr>
            <th></th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th></th>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

Emmetチートコードのカスタマイズ

Emmetのチートコードは修正・追加が可能です。Bracketsのヘルプから、拡張機能のフォルダーを開き、以下パスにある"snippets.json"を編集します。

\extensions\user\brackets-emmet\node_modules\emmet\lib\snippets.json

髭犬の場合も、幾つかのチートコードを追加して利用しています。例えば、以下は外部リンクでtargetとrel設定もされたコードです。入力が煩雑なので、チートコード"aa"で展開されるようにしました。

<a href="" target="_blank" rel="noopener"></a>

なお、編集前の"snippets.json"はバックアップをとり、修正・追加部は別の場所にファイルとして保管しておきましょう(アップデートで"snippets.json"が更新される可能性があるため)。

Beautifyでコード整形を自動化

HTMLのコードを自動整形するBeautifyという拡張機能もとても有用です。タグの改行とインデントが適切に行われ、コードの見栄えが美しくなります。インデントする作業から開放されるので、コーディングの時間が短縮されます。

編集から、保存時にBeautifyするを選択しておけば、保存時に自動整形させることができます。任意のタイミングで行いたい場合は、Ctrl+Alt+Bで実行できます。

注意点を挙げるなら、この機能を使うと、自然とインデントしなくなり、ソースの見栄えを考えながら打たなくなります。髭犬は少し危惧しています。

CMSに近づくHTML手打ち環境

HTML手打ちは煩雑と思われがちですが、Bracketsのようなサクサク動作するHTMLエディタ(プラグイン込み)で、プレビュー、ショートカットキー、タグ等の入力補完、自動整形などの機能を駆使すれば、操作感はWordPressのビジュアルエディタに若干劣る程度です。データーベースと関連性の低いコンテンツ部分の作成だけであれば、WordpressとBracketsにほぼ優劣はないでしょう。

これから、サイトを立ち上げようとお考えの方は、CMSではなくHTML手打ちという選択もありますので、是非ご検討を。HTMLファイルを完全に掌握できますよ。

以下リンクより、1つ前のまとめに戻れます。

ウェブサイト運営まとめ 流行りのWordPressを使わず原始的な手打ちで「髭犬のサイト」を管理している時代遅れの髭犬が、どのようにサイトを運営しているか、その運営方針や設定等をまとめます。