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

ダウンロードとインストール
上記のウェブサイトの「Brackats X.X.X のダウンロード」のリンクをクリックすることで、お使いの環境用のインストールパッケージが入手できます。入手したパッケージは、通常「ダウンロード」フォルダに格納されますので、エクスプローラでダウンロード・フォルダを開き「Brackets.Release.x.xx.x.msi (x.xx.xはバージョン番号)」を右クリックして、「インストール」を選択します。
Bracketsのチューニング
実際、上記の簡単なステップでBracketsはインストールできてしまうのですが、もう少しだけ便利に使えるように、さっそくプラグインを使ってBracketsをチューニングしていきましょう。
1行選択・・・
行番号を左クリックしてドラッグすることで、行を範囲選択できる機能です。DreamWeaverなどでは普通にできていた機能ですが、Bracketsにはデフォルトでは備わっていないので、プラグインの手助けを借りて、この機能を入れたいと思います。
プラグイン・マネージャを起動
まずは、Bracketsを開き、画面の右端にあるブロックのアイコンをクリックします.
すると、以下の画面が表示されます。
上記の画面の検索窓に「Select Lines」と入力して、
プラグインをインストールします。すると、行番号のところにマウス・カーソルをあてると、行全体がハイライトされ、行番号をクリックしたまま下へドラッグすると、複数の行を選択できるようになりました。
このようにして、好きなプラグインを入れることで、Bracketsを簡単にカスタマイズすることが可能です。
PHP対応プラグインをインストール
Bracketsでphpのソースファイルを開くと、以下のようなPHPのランタイムがないといった趣旨のエラーメッセージが出ると思います。
そこで、PHPランタイムの導入を行いたいと思います。
PHPのサイトへ
下記のURLへアクセスして、PHPのサイトへ行きます。
https://www.php.net/
すると、以下の画面が表示されるはずですので、このウェブサイトの画面一番上の「Downloads」をクリックして下さい。
PHPランタイムのダウンロード
PHPのメイン画面から「Downloads」メニューを選択すると、下記の画面が表示されますので、一番上の最新のStable(安定)バージョンのところにある「Windows Downloads」をクリックします。
Windows Downloadsのリンクをクリックすると、以下のような画面が表示されますので、WebサーバとしてIISを使っている人は「VC15 x64 Non Thread Safe」版、もしくはWebサーバとしてApache系を使っている人は「VC15 x64 Thread Safe」版の「Zip」をダウンロードします。
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の画面下にある「ここに入力して検索」の窓に、「環境変数」と入力して下さい。
すると、「システム環境変数の編集」が出てくると思いますので、それをクリックして環境変数の編集ツールを起動します。
ツールが起動したら、「環境変数」のボタンをクリックします。
上記の画面上で「ユーザー環境変数」の欄の「Path」を選択してから、すぐ下の「編集」ボタンを押下します。
上記の画面で、「新規」ボタンを押し、そのすぐ後に続けて「参照」ボタンを押します。新規→参照です。すると、フォルダを選択するダイアログが開きますので、PHPランタイムの格納されているフォルダ(筆者の場合は、前述の「c:\my Program Files\php-7.4.4-Win32-vc15-x64」)を指定してOKボタを押下し、さらに上位の画面でもOKボタンを押下していって設定を完了します。
Brackets側の設定
ここまで来たら、次はBrackets側の設定です。Bracketsでphpの設定をするための画面を開くには2種類の方法があります。
1つ目は、Bracketsを起動して、画面上部の「デバック」メニューから、「環境設定ファイルを開く」という項目を選択する方法です。この方法では、いつでも設定ファイルを編集したくなった際に利用できます。
2つ目の方法は、未だphpの設定が済んでいない場合にだけ使える方法で、まずなんでも良いのでphpのソースファイルを開きます。すると、下記のようなエラーメッセージが表示されます。
ここで、ダイアログボックス内の青いボタン「環境設定を開く」ボタンを押下する方法です。
環境設定ファイルを開くと、Bracketsのメイン画面が縦に2分割され、左側に設定情報のサンプル(DefaultPreferences.json)と、右側の編集画面に実際の環境設定ファイル(brackets.json)が表示されます。
この左側のサンプルファイルから、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 ゴシック, '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 ゴシック, 'MS Gothic', monospace", "themes.theme": "dark-theme" }
phpランタイムの場所を登録する
コメントを取り除いたら、次に、phpランタイムの場所(フルパス)を設定します。このファイルはjsonファイルですので、パス名のセパレータ「¥」は、2つ繋げて入れてエスケープしなければなりません。ここは、php.exeの場所を示します。
- {
- "php": {
- "enablePhpTooling": true,
- "executablePath": "C:\\my program files\\php-7.4.4-Win32-vc15-x64\\php.exe",
- "memoryLimit": "4095M",
- "validateOnType": "false"
- },
- "brackets-eslint.gutterMarks": true,
- "brackets-eslint.useLocalESLint": false,
- "fonts.fontSize": "13px",
- "fonts.fontFamily": "'SourceCodePro-Medium', MS ゴシック, 'MS Gothic', monospace",
- "themes.theme": "dark-theme"
- }
設定を完了する
設定情報を編集し終わったら、右側の画面にカーソルがある状態で、メニューから、「ファイル」→「保存」として、設定を反映させます。
このカテゴリのページリンク |
同一カテゴリの記事一覧
- 【テクニカル】WordPressを多言語化する
- 【テクニカル】CentOs8 インストール後にすべきことメモ
- 【テクニカル】一番簡単なCentOS PHP7.3から7.4への移行方法
- 【テクニカル】パソコンへのLinuxの導入
- 【テクニカル】Open Graph 手書きのウエブサイトをSNSでシェアできるよう…
- 【テクニカル】C# NotifyIconの実装
- 【テクニカル】一番わかりやすいBracketsの導入とトラブルシューティング
- 【テクニカル】無料SSL Let's EncryptでWordpressサイトをSSL化する
- 【テクニカル,未分類】【Windows10】ホテルのWiFi接続時に「インターネット接続…
- 【テクニカル】Let's Encryptのトラブルシューティング
- 【テクニカル】C# で Task を使う
- 【テクニカル】MacBookProにBootcampでWindows10を入れる際のポイント
- 【テクニカル】PHPMailer導入とトラブル対策
- 【テクニカル】PHPMailerのログをSYSLOGに出力
- 【テクニカル】Visual Studio 2017で使うSSHの秘密鍵をputtygenで作成す…
- 【テクニカル】Wordpressの投稿一覧で要らない項目を削除する方法
- 【テクニカル】Google SEO の要点 - Better Google SEO
- 【テクニカル】wordpressを始める前に絶対すべき準備 - Things you need …
- 【テクニカル】Wordpress URL設定間違い・サイト移動のトラブル対応 - Ho…
- 【テクニカル】VisualStudio2013セットアッププロジェクトを戻す! - Vis…
- 【テクニカル】C# でWindowsサービスの「説明」の文を取得する方法 - C# …
- 【テクニカル】動画配信に最低限必要なモノ(動画配信環境)
- 【テクニカル】動画配信のトラブル対処(ブーンというノイズが乗る)
- 【テクニカル】client denied by server configuration: