テキストエディタAtom

Webページを作る際、主にテキストエディタを使っているのですが、『秀丸エディタ』を長年愛用しています。

秀まるおのホームページ(サイトー企画)
秀丸エディタ
⇒http://hide.maruo.co.jp/software/hidemaru.html

複雑なWebページを作るときは、Webオーサリングツールで、無料化された『Microsoft Expression 4』を使うこともあります。

Microsoft
Expression 公式サイト
⇒http://www.microsoft.com/expression/jpn/

この『Microsoft Expression 4』は開発が数年前に中止されたため、いかんせんHTML5との相性が悪いです。しかも日本語との相性も悪く、文字化けをよく起こします。

何か変わる物は無いかと探してみたところ、現在の流行はGithubで提供されている『Atom』というテキストエディタということを知りました。

ということで、『Atom』をWeb開発環境に導入してみました。

導入方法

  1. そもそもAtomを知ったのは『ドットインストール』というWeb上のプログラミング教育サイトです。こちらでHTML学習の最初に「Atom」を紹介していました。

  2. ドットインストール
    HTML入門 (全24回)
    #02 必要なツールを用意しよう
    ⇒http://dotinstall.com/lessons/basic_html_v3/31602

  3. 導入方法は上記講座を見れば分かります。

  4. この『Atom』は基本的にインターフェイスが英語で日本語訳が追いついていないようなので、英単語をある程度理解していないと使いづらいでしょう。

  5. また、メモリを多く消費しているようなので、パソコン環境によっては動きが悪くなるかも知れません。

  6. 簡単に導入方法を書いておきます。まずは公式サイトからパッケージをダウンロードします。

  7. Github
    Atom
    ⇒https://atom.io/

  8. プログラミング用に『Ricty Diminished 』という見やすいフォントを導入しておきます。

  9. Git Hub
    Ricty Diminished
    ⇒https://github.com/yascentur/RictyDiminished

  10. 数字の「0(零)」とアルファベットの「O(オー)」の区別や半角・全角スペースの区別などがし易くなってます。

  11. ファイルパッケージの圧縮ファイルを展開するといろいろ入ってますが、『RictyDiminished-Regular』をインストールします。

  12. 続いてAtomの初期設定をしておきます。

  13. Atomのメニューから 「Packages」 → 「Settings View」 → 「Open」 で設定画面を開きます。

  14. 見出し「Core Settings」に「File Encoding」を選択する欄があるので、そこに『utf8』を選択しておきます。

  15. 見出し「Editor Settings」に「Font Family」を入力する欄があるので、そこに『Ricty Diminished』と入力します。

  16. 「Show Invisibles」にチェックし、スペースやタブなどを見えるようにしておきます。あとはお好みで「Show Line Numbers」にチェックして行番号を表示させます。

  17. 次に、日本語の折り返しに対応させるため、『japanese wrap』というパッケージをインストールします。

  18. 「Settings」タブの「Install」メニューを選択します。

  19. 検索欄に「japanese wrap」と入力し、Packagesで検索すると見つかります。インストールボタンをクリックするとインストールされます。

  20. これで基本的な設定ができました。場合によっては「View」 → 「Toggle Tree View (ctrl + \)」でツリー表示を非表示にするといいでしょう。

  21. Atom使ってみた画面がこちら

    atom_sample3.png
  22. 設定でテーマを選ぶことでレイアウトの色合いを変更することもできます。

使い方

  1. 使い方についてドットインストールに講座が用意されています。

  2. ドットインストール
    Atom入門 (全13回)
    ⇒http://dotinstall.com/lessons/basic_atom

  3. 多くの機能があって、私はまだ使いこなせていないのですが、『Expression Web 4』よりは使いやすいと感じています。

追加パッケージ

  1. 環境を快適にするためにパッケージを追加してみました。

    • japanese wrap :日本語の折り返し
    • autocomplete-plus :補完候補の表示
    • atom-beautifier :コードの整形
    • linter :コードの検証
    • atom color highlight :指定色をその色でハイライト表示
    • atom html previer :HTMLのプレビュー
    • file icons :拡張子別にアイコン表示
  2. 他にもパッケージがたくさんあり、機能が充実しています。

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。