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

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

PHPやHTMLなどを記述するのに高機能なテキストエディタを使うと一気に作業効率が上がります。SublimeTextも人気だけどちょっと難しそう……そんなときには国産の無料で使えるサクラエディタをおすすめします。サクラエディタと言えば、windows上で動作するエディタとしては、国内で最もメジャーなエディタの一つです。

何より国産エディタのため、メニューがはじめから日本語なので初心者の方には特にオススメです!マクロやプラグインも使えるので、使いこなせば一気に作業効率がアップすること間違いなし!今回はそんなサクラエディタのインストールからプログラムを書くときにおすすめの基本設定までをご紹介します。

目次
  1. サクラエディタのインストール
  2. ダウンロード
  3. インストール
  4. サクラエディタの起動
  5. 真っ先にやっておきたい設定
  6. タブを有効にする
  7. 自動保存を有効にする
  8. 編集するファイルごとの設定
  9. HTML向けの設定
  10. PHP向けの設定
  11. Javascript向けの設定
  12. CSS向けの設定
  13. まとめ

image

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

サクラエディタのインストールは一般的な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:\ProgramFiles(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:\ProgramFiles(x86)\sakura\keyword」フォルダまで移動します。
このフォルダ内にデフォルト以外の強調キーワード定義ファイルが保存されています。 この中の「JavaScript.kwd」を選択しましょう。

img29

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

タイプの定義

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

img30

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

img31

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

img32

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

img33

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

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

CSS向けの設定

CSSも初期状態では設定が定義されていません。

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

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

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

img35

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

img36

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

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

読込先:新規追加
新タイプ名:CSS
色選択:そのままインポート
という設定で「OK」をクリックします。

img38

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

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

まとめ

Web制作者がサクラエディタを使いはじめるときにやっておきたい設定の手順についてまとめました。


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

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

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

image

Tech 2 GO編集部
ライター
Tech 2 GO編集部

関連記事