テキストエディタ Atom の使い方

  • LINEで送る

テキストエディタ Atom の使い方

プロミング開発に不可欠のテキストエディタですが、GitHub が開発したオープンソースのテキストエディタ Atom は、パッケージ機能による多様なカスタマイズが可能で、使い易い環境に自由に設定する事が出来るテキストエディタです。。

 利用環境は、Windows , Mac , Linux に対応しています。

利用方法

1.Atom のダウンロード

1-1. 基本的設定

フォントの設定

Wrap Guide

2.Atom の使い方

2-1. Atom の設定

2-1-1. Package(パッケージ)

2-1-2. Theme(テーマ)

2-2, 日本語化

2-3. 便利機能

2-3-1. Emmet(エメット)

2-3-2. Color-picker(カラーピッカー)

2-4. その他の機能

1.Atom のダウンロード

今回は、Windows 10 を利用します。

Atom の公式ダウンロードサイト にアクセスします。

トップ画面が表示されます。表示された画面にある 「Download Windows 64-bit Installer 」 をクリックして ダウウンロードします。

ダウンロードしたファイルを解凍して実行すると、すぐに、インストールが始まります。

インストールが始まると上のような画面が表示されます。暫くしてインストールが完了すると、下の画面のように、テキストエディタ「Atom」 が立ち上がります。

以上で、Atom のインストールが完了しました。

尚、次回から「Welcome Page」が必要がない場合は、

Show Welcome Guide when opening Atom のチェックを外すことも出来ます。

チェックを外して、Atom を再表示した時の画面が下の画面です。

この画面からすぐに始めることが出来ます。

1-1.基本的設定

フォントの設定

プログラミング用フォント Ricty Diminished をインストールします。

まず、Google検索で Ricty Diminished を表示します。

表示された Ricty Diminished をクリックします。

GitHub が表示されます。この中から「RictyDiminished-Regular.ttf」を選択して、クリックします。

次に、右側に表示された「Download」ボタンをクリックしてファイルをダウンロードします。

これでひとまずファイルのダウンロードが終了しました。

*Windows でのファイルの拡張子表示設定は、

エクスプローラーを開き「ファイル」 > 「フォルダーと検索のオプションの変更」をクリックして、「表示」タブ > 「詳細設定」の中にある「登録されている拡張子は表示しない」のチェックを外して「OK」をクリックします。

次に、Atom の「Settings」の「Editor」を選択します。

「Editor Settings」の Font Family のテキストボックスに「Ricty Diminished」と入力します。

以上で、フォントの設定は完了です。

尚、Ricty Diminished の特徴としては、数字の 0と英字の大文字の O との違いが特徴的である。

また、数字の 1 と英子文字の l との違いも判断しやすいようになります。

そして、下のように「Editor Settings」の中の「Show Invisibles」にチェックを入れると、上のような全角スペース  や半角スペースの可視化が分かりやすくなります。

このように、「Show Invisibles」にチェックを入れるとスペースの可視化が出来ます。

下が、半角スペースがわかり易くなっている。HTMLファイルのエディタの画像です。

また、下の画面のように、行が長くなり表示エリアに収まらず、スクロールしないといけない場合があります。

このような場合は、エディタ設定で「Soft Wrap」にチェックを入れます。

「Soft Wrap」にチェックを入れると下の画面のように、先程の1行で表示しきれなかった6行目の<link rel=”・・・・・・・”> が2行に折り返しされています。よって、スクロールしなくても良くなります。

 Wrap Guide

デフォルトでは、エディタ画面に縦に細いラインが表示されています。

この、縦のラインが気になる場合は、消すことができます。

まず、Atom  の settings の画面を表示させ、「Packages」をクリックします。

「Packages」をクリックして「Installed Packages」の検索ボックスに「wrap」と入力します。

すると、「Core Packages」に「wrap guide」が表示されるので、「Disable」をクリックします。

すると、このように 「wrap guide」の縦のガイドラインが表示されなくなりました。

また、ガイドラインを表示させたくなった場合は、

「Settings」 > 「Packages」 を表示させ、「Installed Packages」の検索ボックスに「wrap」と入力して「wrap guide」を表示させて、その中の「Enable」をクリックすると、ガイドが再度表示されます。 

2.Atom の使い方 

Atom には、様々な拡張機能が備えられていて、使いやすくカスタマイズする事が出来ます。「

2-1.Atom の設定

Atom には、デフォルトで利用できる機能を含む90以上のパッケージがあります。

それらのパッケージは、信じられなほど強力なもので、インターフェース全体の見た目から、コア機能の基本的な操作まで、あらゆるものをカスタマイズする事が出来ます。

2-1-1.Package(パッケージ)

 Atom は、ツリービューや設定ビューのような新機能を追加するパッケージが多数揃っている基本的な機能のコアです。

パッケージをインストールしてみます。「Install a Package」 をクリックします。

表示された画面にある 「Open Installer」 をクリックします。

すると、様々なパッケージがあります。使用したいパッケージがある場合は 「 Inatall 」 ボタンをクリックしてパッケージをダウンロードして、インストールします。

「Atom の日本語化」や「Emmet」、「Color-Picker」などもパッケージとしてインストールして、使用することが簡単に出来ます。

 

2-1-2.Theme(テーマ)

Atom のテーマの設定をする事が出来ます。

上のように、「Choose a Theme」から 「 Open the theme picker 」 をクリックして、テーマの設定をします。

テーマは、「UI(ユーザーインターフェース)テーマ」、あるいは、「Syntax(構文)テーマ」のいずれかになります。

現在のテーマはデフォルトの「Dark(暗い)」画面ですが、下のような「Light(明るい)」画面もあります。

現在インストール済みのテーマは12種類です。それぞれ、「Dark」、「Light」。「UI」、{Sintax」等を組み合わせて使用する事が出来ます。

また、インストールパッケージを使用してテーマの設定を行うこともできます。

インストールパッケージの検索ボックスの横にある「Theme」をクリックします。

「Theme」トグルをクリックすると、「+  Install Packages」から「+  Install Themes」に変化して検索ボックスの横の「Theme」がハイライト表示になります。

 Featured Themes」から好きなテーマを選択する事が出来ます。

このように、テーマの設定をする事が出来ます。

 

2-2.日本語化

日本語化するには、まず、メニューの「File」 > 「Settings」をクリックします。

「Settings」をクリックすると、下の画面が表示されます。

 「Settings」の画面の

 Core

 Editor

 System

 Keybindings

 Packages

 Themes

 Updates

 Install

の中から 「   Install」を選択します。

 Install」をクリックすると、

上の画面のように、Packages をインストールする事が出来る画面が表示され、パッケージを検索する事が出来るテキストエリアが表示されます。

このテキストエリアに「Japanese-menu」と入力します。

「Japanese-menu」と入力後、下の「 Packages 」 をクリックします。

暫くして、「Japanese-menu」のパッケージが表示されます。

このように、表示されますので、「 Install 」 をクリックして、パッケージをインストールします。

 インストールが終了すると、

このように、メニューバーや設定画面が日本語化されています。

以上で、「Atom」の日本語化の完了です。

2-3.便利機能

2-3-1.Emmet(エメット)

Emmet は、Web 開発者にとっては必要不可欠のツールキットです。

Emmet は、HTML&CSSのワークフローを大幅に改善する多くのテキストエディタ用のプラグインです。

Atom でも、パッケージとしてインストールする事が出来ます。

パッケージの検索欄に「Emmet」と入力します。

Emmet と入力したのち、 「 Packages 」 をクリックします。

暫くして「emmet 2.4.3」が表示されますので、「 Install 」 をクリックして、「emmet」をインストールします。

このように、「emmet 」のインストールが完了しました。

 

2-3-2.Color-Picker(カラーピッカー)

Atom でカラーを選択する時に便利なパッケージです。カラーを視覚的に選べる事が出来ます。

ここでも、Install Packages でパッケージを検索します。検索テキストエリアに「Color-Picker」と入力します。

表示されたパッケージ「color-picker」をインストールします。

正常にインストールが完了しました。

下の画面は、color-picker の使用方法のデモ画面です。 

Color Picker in action

以上で、color-picker のインストールの完了です。

その他にも、様々なパッケージがありますから、検索してみてください。

2-4.その他の機能

• オートコンプリート機能

 Atom には、タイピング時間の節約になる、自動補完機能が標準で装備されています。

オートコンプリートでは、エディタにおいて、「TAB」キーで補完候補を選択して、「ENTER」キーで挿入する事が出来ます。

css-completions

• コマンドパレットを使う

コマンドパレットを表示させ方法は、

• メニューの「View」から「Toggle Command Palette」をクリックする。

• ショートカットキーを使って、「Ctrl + Shjft + p」を使う。 

• ペイン

ペインとは、エディタ内で、左右上下に同じファイル、あるいは、異なるファイルを同時に分割して表示することです。

分割表示するには、例えば、左右2つの場合は、ショートカットキーを使って、

「Ctrl + K」を押して、一旦離して「→」をクリックします。

すると、同じファイルが左右に分割表示されます。

このように、 HTML ファイルを分割表示したり、下のように、HTML ファイルと CSS ファイルを並べてコーディングする場合も便利です。

この他にも、様々な機能やパッケージなどがあります。自分の使いやすいようにカスタマイズ出来ますので、ぜひ使ってみてください。

 

  • LINEで送る

SNSでもご購読できます。