[戻る]

Editor情報

調査した推奨するテキストエディタの入手情報等について案内します。

TeraPad

  1. 「アプリのサイト」 からアプリ本体「tpad109.exe (776KB) (インストーラ付き)」をダウンロードする。ツールで欲しいものがあれば同時に入手。
  2. アプリに組込まれツールバー釦で登録INIファイルのタグをアプリ画面に挿入するプラグイン「HTML Helper with TeraPad」を「Soraneko.net」からダウンロードし、アプリ本体Terapad.exeのインストールフォルダに解凍する。HTMLTera1121フォルダの中にあるTag.iniファイルがタグを登録するファイルです。好みに合わせグループ分け項目の追加削除と、タグ文の追加修正削除して利用します。当方の現在使用しているファイルは「TPad-20.2.31.ZIP」をダウンロードして上書き利用下さい。
    尚、現在使用している配色データ(TerapadColor-20_1_31.ini)も同梱していますので、Terapad.iniの[Color]グループに上書きして利用下さい。
  3. デスクトップPCのWindows10では、このアプリに使えそうなフォントが在りません。種々試した結果、「Ricty Diminished Discord Bold/Regular」が相性が抜群ですので、ネットから入手し、「C:\Windows\Fonts」フォルダにコピィ利用下さい
  4. Webページを作るときは、いちいち一行ずつ書込むのは面倒で手間がかかるので、HTML5文書の構文の骨格のひな形をテンプレートとして揃え、それ用のスタイルシートもテンプレートを用意し利用するのが、便利です。webページを新規作成する場合、この２つのテンプレートを同一フォルダに名前を付け保存した後、H5ファイルの本文位置に文章を書込んで行き完成します。利用するタグは、BR, P, DIV, SPAN,H1～H6等で十分役に立ちますが、極端に言うと、見栄え良く文章を書込み、PREタグで囲んだだけでもHTML文書として機能OKです。
    2項のZIPファイルに「H5-template.htm」と「user2020.css」を同梱していますので、好みのフォルダを作成収容して、利用下さい。

Brackets

  1. 「公式サイト」から「Brackets.Release.1.14.1.msi」をダウンロードして保存し、インストールする。このアプリは32ビット用で「C:\program files(x86)」フォルダにインストールされる。ユーザ関連データはユーザ用フォルダ「C:\Users\userName\AppData\Roaming\Brackets」にインストールされる。日本語マシンは、自動的に日本語化される。
    「ファイル>拡張機能マネージャ」をクリックしてパネルを表示し、プラグインは 「入手可能」タブ、画面構成ファイルは「テーマ」 タブをクリックして拡張機能をインストールします。
  2. 画面の配色は、白色背景のオリジナル「Brackets light theme elegant」テーマファイルをテーマタブからインストール下さい。次に、圧縮ファイル「Brackets_light_theme_elegant.ZIP」をダウンロード保存し、ユーザフォルダ内の「extensions\user」フォルダに解凍し、オリジナルテーマファイルに上書き下さい。
    theme.lessで、背景・文字類の色変更及び.CodeMirror{ }で行高さと文字ボールド設定を追加している。
  3. HTML5骨格構文とCSSのテンプレートの挿入及びグループ分けされたタグ構文の挿入を実行するプラグイン「insertTags.zip」をユーザフォルダ内の「extensions\user」フォルダに解凍下さい。Userフォルダ内にinsertTagsフォルダが作られ内部に各パーツが格納されます。
    htmlContentフォルダ内のcss-template.cssがCSSテンプレートで、html-template.htmlがhtml5テンプレートですので、このファイルを修正・変更して利用下さい。
    アプリを起動すると、メインメニュバーにタグ挿入メニュが作られ、HTML5とCSSの構文挿入実行メニュの他、タグ区分メニュをクリックして、挿入ダイアログを表示し、挿入タグをチェックしてDone釦を押して、画面のカーソル位置にタグを挿入します。
  4. 前項のタグ挿入メニュのサブメニュ(基本タグ～慣用語句)は、A～Jで番号付けし、tagin-A.html～tagin-J.htmlのファイルをダイアログで表示して、チェックボックスをONにした行のタグ文を挿入します。例えば、最初の基本タグの２行に<p></p>を追加する場合、以下のように処理します。
     ①エディタでtagin-A.htmlを開くと、データはFormタグの次行9行～17行、９個のデータがあり、IDはidx-a1～idx-a9になっています。
 この２番目(10行)に以下のタグ文を挿入します。
 <label><input type="checkbox" id="idx-a2" value="&lt;p>&lt;/p>" /><p></p></label>
 <p></p>がダイアログに表示され、Valueの値："&lt;p>&lt;/p>"が画面に挿入される。
②次行以降のIDの番号を＋１し、idx-a3～idx-a10　に修正する。ダイアログには と表示。
③main.jsをエディタで開き、34行、tagType=="A", optionIDs[ "#idx-a1","#idx-a2", ・・・ ]の最後に"#idx-a10"を追加。→
["#idx-a1","#idx-a2","#idx-a3","#idx-a4","#idx-a5","#idx-a6","#idx-a7","#idx-a8","#idx-a9","#idx-a10"];
以上全て保存して完了。
  5. ユーザ初期設定ファイルにWindows10の標準フォント「Yu Gothic UI」その他の設定をしています。「Brackets-Setting.ZIP」をダウンロードし、ユーザ用フォルダに上書き解凍下さい。
  6. プラグイン「brackets-emmet」をインストールした場合は、「BracketsのEmmetをカスタマイズしてより使いやすくする」を参照し、カスタマイズを検討下さい。少なくとも snippets.jsonの3-4行は、「"lang":"ja","locale": "ja-JP",」に変更されたい。
  7. タスクバーのIME言語バーのツールを左クリックして、プロパティを表示下さい。Microsoft IMEの設定パネルの詳細設定をクリック→予測入力タブが表示→「予測入力を使用する」がONになっています。この場合、このアプリでは、予測候補が入力文字に重なり見えなくなる不具合が起きます。その際は、予測候補を表示するまでの文字数を10～15にセットするか、予測入力使用をオフにして下さい。　
  8. プラグイン「tanishbaansal.html5template」と 「williamlarsson.betterhtmltemplate」をインストールした後、「tanish-will.htmlTemplate.ZIP」ファイルをダウンロードし、ユーザフォルダ「Brackets\Extensions」フォルダ内に解凍上書き下さい。この２つのプラグインのmain.jsのHTMLの言語と文字コードをjaとShift_Jisに変更したものです。　

Notepad++

  1. 「公式サイト」から32ビット「Current Version 7.8.4 」をダウンロード保存しインストールする。ユーザ用データは「C:\Users\userName\AppData\Roaming\Notepad++」フォルダに格納されます。
  2. GitHubサイトの「Manual　installationの２項」をクリックして、「emmet-npp.zip」をダウンロード保存し、アプリをインストールした「Notepad++\plugins 」フォルダ内に解凍します。EmmetNPP.dllとEmmetNPPフォルダが生成されるので、DLLはEmmetNPPフォルダの中に移動下さい。
  3. アプリを起動しプラグインメニュの「プラグイン管理」パネルを表示、利用可能タブから、「Snippets, PythonScript, Custmize Toolbar」 、その他「Mime tools, NPP Converter, NppExec, NppExport, etc」をインストールする。
  4. アプリを起動し、設定メニュのショートカット管理パネルを表示、プラグインタブを選択し、1番と2番のショートカットを「Ctrl+E, Alt+E」に変更、その他赤色の部位を変更下さい。
  5. スニペット修正用「H5-CSS_snippet.ZIP」とシステム修正用「npp-styles.ZIP」をダウンロード保存し、夫々ユーザフォルダ内「plugins\config」フォルダ及びユーザフォルダ「Notepad++」内に解凍上書き下さい。→アプリを再起動すればカスタム化が完了します。
  6. ツールバー右端の下▼ボタンをクリックしてツールバーの変更整備調整をして好みの配置にします。

StyleNote5

  1. 「公式サイト」から「sn522.ZIP」をダウンロード、任意のフォルダに解凍下さい。sn5.exeファイルのショートカットを作り、デスクトップに複写する。スタートメニュから操作したい場合は、「C:\ProgramData\Microsoft\Windows\Start Menu\Programs」フォルダにStyleNoteフォルダを作り、この中にショートカットを複写する。同時にReadmeとinfoファイルのショートカットも入れると良い。アンインストールは、これらをフォルダごと削除する。
  2. アプリを起動してユーザデータを作成後終了する。ユーザデータは、「C:\Users\userName\Documents\StyleNote」フォルダに格納される。アンインストールは、これらをフォルダごと削除する。
  3. 「snUserData-20-01-19.ZIP」をダウンロード、ユーザフォルダ内に解凍上書き下さい。
  4. 本来、このアプリはタグ挿入型ですが、古い省略記法につき当てにならないので、専らサイドバー頼りになり、横幅を食いますので心して利用下さい。

VSCode

  1. 「公式サイト」から、「VSCodeUserSetup-x64-1.42.0.exe」をダウンロードインストール下さい。本体は「C:\Program Files\Microsoft VS Code」フォルダに格納されます。
  2. このアプリのユーザデータは、「C:\Users\userName\AppData\Roaming\Code」 フォルダに格納されている。このフォルダにスニペット・設定データの入った「vscode-user-data.LZH」をダウンロード、解凍上書き下さい。HTML5とCSSのテンプレート、及びエディタの初期設定データが入っています。エディタ本体にhtml5とタイプ、Tabキーを押下すると、html5の骨格構文が出力されます。CSSは、標準のuser2020.cssが打出されます。いずれも、名前を付け保存した後、ページ文章作成を開始します。　
  3. 「theme-customlight.LZH」をダウンロード保存し、本体の「C:\Program Files\Microsoft VS Code\resources\app\extensions」フォルダ内に解凍下さい。アプリの外観とドキュメントの背景白色の配色テーマ用の拡張機能(プラグイン)です。ウインドウズ10用にカスタム化して新規作成したものです。ギヤアイコンをクリック、配色テーマのCustom Lightを利用されたい。 本体はcustomlight-color-theme.jsonです。
    長期使わないと消滅することがありますので注意。

Sublime Text3

  1. 「公式サイト」から「Sublime Text Build 3211 x64 Setup.exe」をダウンロードしインストールします。インストールは「Windows - Sublime Text 3 のダウンロードとインストール」、日本語化は「Sublime Text 3インストール、初期設定、日本語化【2020年版】」を参考にして進めてください。「Sublime Text 3 初期設定まとめ」を参考に初期設定をする。
  2. 「Packages-snippet.LZH」を「C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages」に解凍下さい。HTML5とCSSのテンプレートを出力するスニペットが入っています。
  3. 「User-colorScheme.LZH」を「C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages\User」フォルダに解凍下さい。カスタマイズしたカラースキーマファイルが入っています。
  4. 「theme-package.LZH」を「C:\Users\userName\AppData\Roaming\Sublime Text 3」に解凍下さい。パッケージ(Theme-Monkai+.sublime-package)のテーマに悪さをしていたテーマを１つ削除しました。既存に解凍上書き下さい。