一番わかりやすいBracketsの導入とトラブルシューティング

post-89-2021-02-25-0014
2021.02.25

Adobe発無料のエディタBrackets

　Adobe社のHTMLエディタといえばドリーム・ウィーバーが有名ですね。でもあれは、処理が重いし、要らない機能満載だし、なにより、せっかく綺麗に作ったソースがめちゃくちゃになるなどの不満要素が多くて、敬遠していた。
　その後、同社からHTMLエディタとして「Edge Code CC」というのが出ていたが、これが今回紹介する「Brackets」の前身です。このエディタ、CSS編集中に色コードを入れるところで、カラーピッカーが表示されたり、さらには、インテリセンス入力みたいな感じの入力が可能だったり、プラグインを入れることで様々な拡張機能が使えたり、いきなり最初からなにもしなくても日本語対応済みだったりと、なかなか便利なので、最近は手動でHTMLソースなどを編集する際には必ずお世話になっています。
　このBracketsですが、HTMLだけでなく、様々な開発言語に対応でき、さらには、PHPランタイムを入れることによって、PHPソースにも対応してくれます。まさに超便利！ これをオススメしないわけにはいかない、ということで、今回はBracketsの導入とトラブルシューティングを紹介します。

BracketsのWindows10へのインストール

Bracketsのサイトへ

まずは、下記のBracketのサイトへアクセスします。
http://brackets.io/

上記のURLにアクセスすると、下記の画面が表示されます。

post-89-2021-02-25-0001

ダウンロードとインストール

 　上記のウェブサイトの「Brackats X.X.X のダウンロード」のリンクをクリックすることで、お使いの環境用のインストールパッケージが入手できます。入手したパッケージは、通常「ダウンロード」フォルダに格納されますので、エクスプローラでダウンロード・フォルダを開き「Brackets.Release.x.xx.x.msi （x.xx.xはバージョン番号）」を右クリックして、「インストール」を選択します。

Bracketsのチューニング

　実際、上記の簡単なステップでBracketsはインストールできてしまうのですが、もう少しだけ便利に使えるように、さっそくプラグインを使ってBracketsをチューニングしていきましょう。

１行選択・・・

　行番号を左クリックしてドラッグすることで、行を範囲選択できる機能です。DreamWeaverなどでは普通にできていた機能ですが、Bracketsにはデフォルトでは備わっていないので、プラグインの手助けを借りて、この機能を入れたいと思います。

プラグイン・マネージャを起動

まずは、Bracketsを開き、画面の右端にあるブロックのアイコンをクリックします。

post-89-2021-02-25-0002

すると、以下の画面が表示されます。

すると、以下の画面が表示されます。

上記の画面の検索窓に「Select Lines」と入力して、プラグインをインストールします。すると、行番号のところにマウス・カーソルをあてると、行全体がハイライトされ、行番号をクリックしたまま下へドラッグすると、複数の行を選択できるようになりました。

post-89-2021-02-25-0004
このようにして、好きなプラグインを入れることで、Bracketsを簡単にカスタマイズすることが可能です。

PHP対応プラグインをインストール

Bracketsでphpのソースファイルを開くと、以下のようなPHPのランタイムがないといった趣旨のエラーメッセージが出ると思います。

post-89-2021-02-25-0005

　そこで、PHPランタイムの導入を行いたいと思います。

PHPのサイトへ

　下記のURLへアクセスして、PHPのサイトへ行きます。

　　https://www.php.net/

　すると、以下の画面が表示されるはずですので、このウェブサイトの画面一番上の「Downloads」をクリックして下さい。

post-89-2021-02-25-0006

PHPランタイムのダウンロード

PHPのメイン画面から「Downloads」メニューを選択すると、下記の画面が表示されますので、一番上の最新のStable（安定）バージョンのところにある「Windows Downloads」をクリックします。

post-89-2021-02-25-0007

　Windows Downloadsのリンクをクリックすると、以下のような画面が表示されますので、WebサーバとしてＩＩＳを使っている人は「VC15 x64 Non Thread Safe」版、もしくはWebサーバとしてApache系を使っている人は「VC15 x64 Thread Safe」版の「Zip」をダウンロードします。

post-89-2021-02-25-0008

PHPランタイムのインストール

　ダウンロードしたZIPファイルは、Cドライブに適当なフォルダを作ってそこに解凍してください。筆者の場合は、Cドライブの直下に「my Program Files」というフォルダを作って、その中にこのZIPファイルを入れてからZIPファイルを解凍しました。

　すると、以下のようなフォルダができていました。
　c:\my Program Files\php-7.4.4-Win32-vc15-x64

　筆者がダウンロードした時点では、PHPランタイムのバージョンは、7.4.4でしたが、これはランタイムのバージョンアップに伴って変わっていきます。

環境変数を設定する

　PHPランタイムを解凍したら、次は、環境変数の設定をします。Windowsの画面下にある「ここに入力して検索」の窓に、「環境変数」と入力して下さい。

post-89-2021-02-25-0009

　すると、「システム環境変数の編集」が出てくると思いますので、それをクリックして環境変数の編集ツールを起動します。

post-89-2021-02-25-0010

ツールが起動したら、「環境変数」のボタンをクリックします。

post-89-2021-02-25-0011

上記の画面上で「ユーザー環境変数」の欄の「Path」を選択してから、すぐ下の「編集」ボタンを押下します。

post-89-2021-02-25-0012

　上記の画面で、「新規」ボタンを押し、そのすぐ後に続けて「参照」ボタンを押します。新規→参照です。すると、フォルダを選択するダイアログが開きますので、PHPランタイムの格納されているフォルダ（筆者の場合は、前述の「c:\my Program Files\php-7.4.4-Win32-vc15-x64」）を指定してOKボタを押下し、さらに上位の画面でもOKボタンを押下していって設定を完了します。

Brackets側の設定

 　ここまで来たら、次はBrackets側の設定です。Bracketsでphpの設定をするための画面を開くには２種類の方法があります。
　１つ目は、Bracketsを起動して、画面上部の「デバック」メニューから、「環境設定ファイルを開く」という項目を選択する方法です。この方法では、いつでも設定ファイルを編集したくなった際に利用できます。
　２つ目の方法は、未だphpの設定が済んでいない場合にだけ使える方法で、まずなんでも良いのでphpのソースファイルを開きます。すると、下記のようなエラーメッセージが表示されます。

post-89-2021-02-25-0005

　ここで、ダイアログボックス内の青いボタン「環境設定を開く」ボタンを押下する方法です。

　環境設定ファイルを開くと、Bracketsのメイン画面が縦に２分割され、左側に設定情報のサンプル（DefaultPreferences.json）と、右側の編集画面に実際の環境設定ファイル（brackets.json）が表示されます。

post-89-2021-02-25-0013

　この左側のサンプルファイルから、phpの設定情報を探して下さい。かなり下の方にあります。

// PHP ツールのデフォルト設定
"php": {
	// デフォルト: true
	"enablePhpTooling": true,
	// デフォルト: php
	"executablePath": "php",
	// デフォルト: 4095M
	"memoryLimit": "4095M",
	// デフォルト: false
	"validateOnType": "false"
},

　php関係の設定サンプルを見つけたら、その部分をコピーし、右側の編集画面にあるbrackets.jsonに正確にコピーします。

{
	// PHP ツールのデフォルト設定
	"php": {
		// デフォルト: true
		"enablePhpTooling": true,
		// デフォルト: php
		"executablePath": "php",
		// デフォルト: 4095M
		"memoryLimit": "4095M",
		// デフォルト: false
		"validateOnType": "false"
	},
    "brackets-eslint.gutterMarks": true,
    "brackets-eslint.useLocalESLint": false,
    "fonts.fontSize": "13px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "themes.theme": "dark-theme"
}

　ポイントは、左側の画面からコピーしてきたphpの設定情報を、右側の実際の設定ファイルのほうにペーストするのですが、このとき、既存の設定情報の真下に入れるのではなく、一番上にペーストするのがミソです。

コメントを全部取り除く

　うまくコピーできたら、すべてのコメント行を削除します。

{
    "php": {
        "enablePhpTooling": true,
        "executablePath": "php",
        "memoryLimit": "4095M",
        "validateOnType": "false"
    },
    "brackets-eslint.gutterMarks": true,
    "brackets-eslint.useLocalESLint": false,
    "fonts.fontSize": "13px",
    "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
    "themes.theme": "dark-theme"
}

phpランタイムの場所を登録する

　コメントを取り除いたら、次に、phpランタイムの場所（フルパス）を設定します。このファイルはjsonファイルですので、パス名のセパレータ「￥」は、２つ繋げて入れてエスケープしなければなりません。ここは、php.exeの場所を示します。

  1. {
  2.     "php": {
  3.         "enablePhpTooling": true,
  4.         "executablePath": "C:\\my program files\\php-7.4.4-Win32-vc15-x64\\php.exe",
  5.         "memoryLimit": "4095M",
  6.         "validateOnType": "false"
  7.     },
  8.     "brackets-eslint.gutterMarks": true,
  9.     "brackets-eslint.useLocalESLint": false,
  10.     "fonts.fontSize": "13px",
  11.     "fonts.fontFamily": "'SourceCodePro-Medium', ＭＳ ゴシック, 'MS Gothic', monospace",
  12.     "themes.theme": "dark-theme"
  13. }

設定を完了する

　設定情報を編集し終わったら、右側の画面にカーソルがある状態で、メニューから、「ファイル」→「保存」として、設定を反映させます。

タイトルとURLをコピーしました