サクラエディタ初心者なら必ず入れたい便利機能3選

      2016/11/07

Code部

PHPやHTMLなどを記述するのに高機能なテキストエディタを使うと一気に作業効率が上がります。SublimeTextも人気だけどちょっと難しそう……そんなときには国産の無料で使えるサクラエディタをおすすめします。サクラエディタと言えば、windows上で動作するエディタとしては、国内で最もメジャーなエディタの一つです。何より国産エディタのため、メニューがはじめから日本語なので初心者の方には特にオススメです!マクロやプラグインも使えるので、使いこなせば一気に作業効率がアップすること間違いなし!今回はそんなサクラエディタのインストールからプログラムを書くときにおすすめの基本設定までをご紹介します。

また、ほかのエディタに関しても網羅的に解説した記事がありますので、併せてご参考にしてください。
初心者にオススメ!フリーのテキストエディタ10選

サクラエディタのインストール

サクラエディタのインストールは一般的なWindowsのアプリケーションと同じくとても簡単です。
インストーラーをダウンロードし、マウスでボタンをクリックしていくだけです。

ダウンロード

img2
http://sakura-editor.sourceforge.net/download.html
サクラエディタDownloadページからインストーラーをダウンロードし、保存します。

インストール

img3
次に保存したファイルをダブルクリックすると、インストーラーが起動します。

img4
特別な設定が必要でない限りは「次へ」をクリックしていくだけです。

img5
「サクラエディタ セットアップウィザードの完了」というメッセージが表示されるとインストールが完了です。
「完了」をクリックしてインストーラーを終了し、サクラエディタを起動してみましょう。

サクラエディタの起動

img6
デスクトップのアイコンかスタートメニューの「すべてのプログラム」内、「サクラエディタ」の中の「サクラエディタ」をクリックします。

img7

サクラエディタが起動しました!
見た目はメモ帳とあまり変わらないと思われるかもしれませんね。でもプログラム・コーディングに役立つ機能がたくさん詰まってます!

真っ先にやっておきたい設定

サクラエディタでコーディングをするにあたり、次の設定は必ずやっておきましょう!作業効率に大きく差が出ます!

タブを有効にする

Webサイトを作成するときはHTMLやCSSなど複数のファイルを同時に編集することになります。
多くのウインドウが開いていると作業効率が悪くなりますので、タブ機能を有効にする設定をしましょう。

img8
メニューの「設定」の中の「共通設定」をクリックします。

img9
「タブバー」の中の「タブバーを有効にする」にチェックを入れます。
そうすると複数ファイルを開いても1枚のウインドウの中でタブになりますので、ファイルを開くたびにウインドウだらけになることがありません。
img7

自動保存を有効にする

img10
「ファイル」の中の「自動的に保存する」にチェックを入れます。

サクラエディタはPhotoshopやIllustratorのようなグラフィックソフトと比べても非常に軽く、安定したソフトです。
ですがフリーズやクラッシュの可能性はゼロではありません。そんなときに備えて自動的に保存する機能を有効にしておきましょう。
保存間隔を分単位で選べますので、ご自身の作業ペースに合わせた設定を行ってください。

編集するファイルごとの設定

続いて、Web制作でよく扱うファイルの種類ごとの設定をします。
ここではCode部の読者様がよく扱うと思われるHTML、CSS、PHP、Javascriptの設定を行ってみましょう!

img11
まずメニューより「設定」を選び、「タイプ別設定一覧」をクリックします。

img12
次に、編集したい言語の設定を選択し、「設定変更」をクリックします。
そうすると言語ごとの設定変更画面が表示されますので、ここでより使いやすい設定に変更します。

HTML向けの設定

デフォルトの文字コードをUTF-8に

img13
「ウインドウ」をクリックし、「文字コード」をUTF-8に変更します。
今後制作するWebサイトのほとんどはUTF-8ですので、デフォルトの文字コードを変更しておくとうっかりShift_JISで作ってしまうというトラブルを避ける事ができます。

もちろんShift_JISやEUCのファイルを開いたときに勝手に文字コードが変更されるようなことはありませんのでご安心ください。

PHP向けの設定

PHPは初期状態では設定が定義されていませんので、設定を定義するところからはじめます。

強調キーワードの設定

img14
メニューより「共通設定」を選びます。

img15
共通設定画面が開きますので、「強調キーワード」をクリックします。

img16
次に「セット追加」をクリックし、「キーワードのセット追加」欄に「PHP」と入力します。
入力が終わりましたら「OK」をクリックします。

img17
続いて「インポート」をクリックします。

img18
そうするとファイル選択画面が開きますので、「C:\Program Files (x86)\sakura\keyword」フォルダまで移動します。
このフォルダ内にデフォルト以外の強調キーワード定義ファイルが保存されています。
この中の「PHP.KWD」を選択しましょう。

img19
そうすると強調キーワード一覧にPHPの関数が表示されました。
これで関数が色分けされて表示されます。

タイプの定義

ただ、強調キーワードの定義だけではPHPファイルを開いた時にその定義が適用されません。
「タイプ別設定一覧」よりPHPを追加し、ファイル形式と強調キーワードの定義とを関連付けます。

img20
メニューの「設定」をクリックし、「タイプ別設定一覧」を選びます。

img21
「追加」をクリックすると新しく設定が追加されます。
新しく追加された設定を選択した状態で「設定変更」をクリックします。

img22
まず「スクリーン」欄の「設定の名前」を「PHP」に変更し、次に「ファイル拡張子」に「PHP」と入力します。
これでPHPファイルを開いた時にこの設定が適用されるようになります。
img23
続いて「カラー」をクリックし、「強調キーワード」の項目を「PHP」に変更します。これはPHPファイルを開いた時に、先ほど設定したPHPの強調キーワード定義を適用させるという設定です。

これでPHPの関数が色分けされ、見やすくなります!開発もしやすくなりますね。

Javascript向けの設定

Javascriptの設定方法もPHPの場合とほぼ同様です。

強調キーワードの設定

img24

メニューより「共通設定」を選びます。
img25

続いて、「強調キーワード」をクリックしてください。
img26

次に「セット追加」をクリックし、「キーワードのセット追加」欄に「Javascript」と入力します。
入力が終わりましたら「OK」をクリックします。
img27

続いて「インポート」をクリックします。

img28
そうするとファイル選択画面が開きますので、「C:\Program Files (x86)\sakura\keyword」フォルダまで移動します。
このフォルダ内にデフォルト以外の強調キーワード定義ファイルが保存されています。
この中の「JavaScript.kwd」を選択しましょう。

img29
そうすると強調キーワード一覧にJavascriptの関数が表示されました。
これで関数が色分けされて表示されます。

タイプの定義

「タイプ別設定一覧」よりJavascriptを追加し、ファイル形式と強調キーワードの定義とを関連付けます。

img30
メニューの「設定」をクリックし、「タイプ別設定一覧」を選びます。

img31
「追加」をクリックすると新しく設定が追加されます。
新しく追加された設定を選択した状態で「設定変更」をクリックします。

img32
まず「スクリーン」欄の「設定の名前」を「Javascript」に変更し、次に「ファイル拡張子」に「JS」と入力します。

img33
続いて「カラー」をクリックし、「強調キーワード」の項目を「Javascript」に変更します。

これでJSファイルを開いた時に関数や変数がわかりやすく色分けされて表示されるようになりました!

CSS向けの設定

CSSも初期状態では設定が定義されていません。
ただ、サクラエディタがデフォルトで用意しているCSSの定義ファイルはCSS2のものですので、今では当たり前に使うborder-radiusやbox-shadowなどのCSS3のプロパティが強調表示されません。

そこで、インターネットで配布されているCSS3向けの定義をダウンロードして使用します。

img34
サクラエディタ用CSSシンタックスハイライトを公開します – 血統の森+はてな

上記ページより圧縮ファイルをダウンロードし、解凍します。

img35
サクラエディタに戻り、メニューの「設定」を選び、「タイプ別設定一覧」をクリックします。

img36
ここで「インポート」をクリックし、先ほど解凍したファイルの中の「CSS.ini」を選択します。

img37
「インポート確認」という画面が開きますので、

読込先:新規追加
新タイプ名:CSS
色選択:そのままインポート

という設定で「OK」をクリックします。

img38
そうすると「CSS」という設定が追加されていることが分かります。

ここまでの設定が完了した状態でCSSファイルを開くと、きちんと色分けされて見やすく表示されるようになります。
これでCSSファイルの編集もしやすくなりました。

まとめ

Web制作者がサクラエディタを使いはじめるときにやっておきたい設定の手順についてまとめました。
設定画面を見て気づかれた方も多いかもしれませんが、サクラエディタはとても細かく柔軟なカスタマイズが可能です。
また、マクロ機能もとても強力で、上手く使えば手作業だと面倒な操作も一瞬で終わらせることができます。

エディタ選びに迷っておられる方は、是非試してみてください!

 

プログラミング初心者の方によく読まれています!

 - テキストエディタ, プログラミング