このエントリーをはてなブックマークに追加

JavaScript強調キーワード&ヘルプ(サクラエディタ)

更新:

自作のサクラエディタ用JavaScript強調キーワード・ヘルプファイルの配布、ダウンロード、および設定方法。

当ページでは、私がサクラエディタで使用するために自作したJavaScript用の強調キーワード・ヘルプファイルを公開しています。

強調キーワードとはメソッドなどを色分け表示する機能のことで、シンタックスハイライトとも呼ばれます。 サクラエディタには JavaScript.kwd というファイルが同梱されていますが、少し古いので新しいファイルを作りました。

ダウンロード

同梱ファイルの内容は以下のとおり。

  • javascript.kwd: 強調キーワード
  • javascript.khp: キーワードヘルプ
  • javascript_event.khp: イベントキーワード
  • javascript_event.khp: イベントヘルプ
  • README.md: 取扱説明書
  • CHANGELOG.md: 変更履歴

設定後、キーワードやヘルプのファイルを置く場所を移動すると再設定が必要なのでご注意ください。

設定手順

  1. サクラエディタのメニューから[設定]→[共通設定]と進み、[強調キーワード]タブをクリックする。
  2. [セット追加]をクリックし、セットの名称を入力。「JavaScript」など自分の好きな名称で良い。
  3. [インポート]をクリックし、javascript.kwd を選択。[英大文字小文字区別]をチェックして[OK]をクリック。
  4. javascript_event.kwd についても同様に作業を行う。「JS event」など別名で登録しても良いし、上記に追加インポートしても良い。
  5. メニューに戻り[設定]→[タイプ別設定一覧]にて[設定17]など空いている設定を選択し、[設定変更]をクリック。 空きがない場合は[追加]で追加する。
  6. [スクリーン]タブ
    • 設定の名前: JavaScript
    • ファイル拡張子: js
  7. [カラー]タブ
    • 色指定: シングルクォーテーションとダブルクオーテーションをチェック
    • 強調キーワード1: JavaScript
    • コメントスタイル ブロック型: /* ~ */
    • コメントスタイル 行型: //
    • イベントを別名で登録した場合は、[2~10]ボタンをクリックし、「強調キーワード2」にそれを設定する。
  8. [支援]タブ
    • [入力補完機能]にて「強調キーワード」にチェックを入れる。
    • 別のファイルを指定したい場合は[(1)...]をクリックし、入力補完用のファイルを指定する。
  9. [キーワードヘルプ]タブ
    1. [キーワードヘルプ機能を使う]をチェックする。
    2. [辞書ファイル]の[...]をクリックし、javascript.khp を選択して[挿入]をクリックする。

以上の設定を行い .js ファイルを開くとキーワードが強調(色分け表示)され、ヘルプも表示できます。 キーワードが強調されない場合は、すべてのサクラエディタのウィンドウを閉じたり、常駐している場合はそれも閉じ、再度ファイルを開きます。 また、メニューの[設定]→[タイプ別設定一覧]でJavaScriptを選択して[一時適用]を試します。

HTML(.html)ファイルでも強調表示したい場合は、HTMLのタイプ別設定の[カラー]タブで、「強調キーワード」の「2~10」をクリックして「強調キーワード2」などで「JavaScript」を選択します。 コメントスタイルは HTML のもの(<!-- -->)に加えて、ブロック型 /* ~ */、行型 // を追加します。 色指定の中から「強調キーワード2」の色を好きな色に変更します。

  • 入力補完
    サクラエディタで.jsファイルを開いた後、例えば「le」と入力し、leの文字のすぐ後にカーソルがある状態で[Ctrl]+[スペースキー]を押すと、leで始まるキーワードが一覧表示されます。
  • ヘルプ表示
    サクラエディタで.jsファイルを開いた後、メソッド等を範囲選択し、その上にマウスカーソルを重ねるとその説明が表示されます。

補足

本ファイルは少し特殊な収録方法となっています。 JavaScriptの上位オブジェクトがある場合、それを含むものと含まないもの両方を収録しています。 例えば、Math.log は、Math.log と log の両方を収録しています。 log だけでなく Math.log も載せることで、Math の入力補完を行うと、Math にどういうプロパティやメソッドがあるか分かります。 また、log には console.log もあります。 同名のプロパティやメソッドは1つにまとめ、log のヘルプを見ると Math.log と console.log 両方の説明が表示されるようになっています。 また、Math.log すべてを範囲選択してヘルプを見ると Math.log だけのヘルプが表示されます。


このエントリーをはてなブックマークに追加