オンラインでの作業の際は迷わずWordPressのエディタで記事を編集していますが、

出先にPCを持ち出して待ち時間に記事を書く、なんてこともあります。

 

オフラインで記事を書くのであれば何らかのテキストエディタが必要になります。

 

これまで自宅のPCでは『サクラエディタ』を使用していました。

 ※ちなみに『秀丸』ではなく『サクラエディタ』を選んだのは、

  新卒入社した会社の新人研修で使用していたことと、

  『秀丸』のアイコンよりも『サクラエディタ』のアイコンが好きだったからです。

 

初心に戻ってコード補完なし、色分けなしとかでやるのはさすがに面倒なので。

「HTMLエディタ」的なものを探してみました。

 

いくつかツールは存在していましたが、今回はデザインの良かった『Atom』を選びました。

インストール方法及び、HTMLエディタとして使うにあたっての初期設定をご紹介いたします。


目次

 1. 『Atom』のダウンロード

 2. プレビュー機能の追加

 3. 日本語化パッケージの追加

 4. その他


1. 『Atom』のダウンロード

 1-1. 『Atom』公式サイトのダウンロードボタンをクリック。

   ダウンロードしたファイルを実行し、『Atom』をインストールします。

 

  インストール完了後、『Atom』が立ち上がる。

 

  次にHTMLエディタとして必要な(最低限の)設定を行っていく。


2. プレビュー機能の追加

 

 コード補完が出来るだけでは正直メモ帳と変わらないので、

 『Atom』を選んだ理由でもあるプレビュー機能を追加していく。

 

 2-1. ウィンドウ右側の「Welcome Guide」⇒「Install a Package」⇒「Open Installer」を開く。

 

 2-2. 「atom-html-preview」を入力しEnterキーで検索が実行されるので、

   表示された下記のパッケージをインストールする。

 

 2-3. パッケージインストール後、.htmlファイルのソースコード上で右クリックすると、

   開いたメニューに「Preview HTML」が表示されるようになる。

    ショートカットキー:Ctrl+Shift+H

 

  実行するとこんな感じに表示される。

 

  これでオフラインでもテキストエディタのみで記事を書くことができるようになりました。

  次はおまけの設定です。


3. 日本語化パッケージの追加

 

 普段から統合開発環境やDBツールなどで英語に触れている方は慣れているかもしれませんが、

 こうしたツールは基本的には英語で表記されているため、ちょっとわかりづらいです。

 

 フリーでも活発なものであれば、どこぞの優秀なエンジニアさんが日本語化してくれているので、

 今回はその恩恵にあずかる設定です。

 

 3-1. 「Welcome Guide」⇒「Install a Package」⇒「Open Installer」をクリック。

   「japanese」とかで検索して、下記のパッケージをインストール。

 

  全部が全部日本語化されるわけではありませんが、

  英語がダメな人でもこれで少しは楽になるかと思います。


4. その他  

 

 『Atom』を使用してファイルを新規作成(Ctrl+Nとか)した場合、

 作成されたファイルの形式を手動で設定してやる必要があります。

 

 下記図では「Plain Text」に設定されているので、これをHTMLに変えるには、

 「Plain Text」と表示されている部分をクリックします。

 

 表示されるダイアログのフォームにHTMLと入力し、表示された形式を選択します。

 

 

 HTMLに置き換わりました。

 

 

 ただし、ファイルを保存する際にデフォルトだと拡張子なしのただのファイルとして保存されるため、

 HTMLファイルとして保存したい場合は、ファイル保存の際に.htmlをくっつけてやる必要があります。


 

新しいツールが増えたりするとものすごくクリエイティブな事してる気になれますね。