- 追加された行はこの色です。
- 削除された行はこの色です。
- Atom へ行く。
#author("2022-07-27T13:01:46+09:00;2022-07-27T13:01:35+09:00","default:inoue.ko","inoue.ko")
*Atom
[[TextEditor]]
&color(red){2022年6月 GitHub は Atom の開発終了を宣言しました。この記事は、過去情報としてアーカイブしています。};
&color(blue){''テキストエディタを初めて導入する方へ''&br;この世界は、移り変わりが早いもので・・テキストエディタの選択に特にこだわりがないのであれば、__[[VSCode>Google:VSCode]]__ の導入をお勧めします。};
~
Atom(アトム)は、2014年にGithubから公開されたオープンソースのテキストエディタです。Google Chromeのフォーク元である Chromiumをベースとしたアプリケーションで、Windows版、Mac版、Linux版があります。
HTML、CSS、Javascriptほか、コード入力のサポート機能はもちろん、機能拡張も豊富です。ダウンロード＞ https://atom.io/
~
***CONTENTS
#contents2_1
~
~
**基本操作
***ペイン分割
HTMLとCSSなど２つのファイルを同時に開いている場合、ペイン分割を行うと左右や上下にウインドウを分割して作業することができます。
表示 > ペイン分割 [上下左右]
ShortCut：[Commamd]+[K] > [→] （Command + k を一旦離して → ）
~
***行の折り返し
一行が長く、ソースが読みにくい場合は、以下のようにします。
表示 > 自動折り返しの切り替え （これはトグルになっています）
~
***文字サイズの拡大・縮小
ブラウザのインターフェイスと同様です。
COMMAND [+] で拡大 / COMMAND [-] で縮小
~
***HTML入力サポートの活用
HTMLの入力では、タグ名＋[TAB] で、開始タグ（+基本属性）・終了タグの枠組みがセットで表示されます。ファイルの拡張子が .html となっていることが前提です。
-html+[TAB] → 以下のように雛形が自動生成されます。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
-link+[TAB]
<link rel="stylesheet" href="/css/master.css">
-script+[TAB]
<script type="text/javascript">
</script>
-タグ名+[TAB]
a+[TAB] → <a href=""></a>
h2+[TAB] → <h2></h2>
-[COMMAND] + [/]
選択した範囲がコメントアウトアウトされます。
<!--
：
-->
~
***CSS入力サポートの活用
CSSの入力では、セレクタ名の入力中、プロパティーの入力中に候補が表示されるので、単語綴りを正確に覚えていなくても大丈夫です。ファイルの拡張子が .cssとなっていることが前提です。
-プロパティー名
入力をはじめると、自動的に候補が出現します。
-[COMMAND] + [/]
選択した範囲がコメントアウトされます。
/*
：
*/
~
***その他の入力サポート
-[[Google:Atom ショートカット]]
-[[Atom 12の小技>https://www.sitepoint.com/12-favorite-atom-tips-and-shortcuts-to-improve-your-workflow/]]
~
***検索・置換の活用
[Command] + [F] ← 多くのソフトで共通です（ブラウザも）
-画面下に、Find と Replace の２つの入力エリアが表示されます。
-Findの欄に検索したい文字列を入力して[Find]とすると発見できます。
-文字列を一挙に別の文字列に置き換えるには、Replaceの欄に変更する文字列を入力して [Replace All] で完了します。
~
***MarkDownファイルの表示
拡張子.md のファイルは [[Markdown]] 形式（代表例 Wikiの表記）です。DLしたパッケージに .md がある場合、以下の操作できれいに表示されます。
CTRL + SHIFT + m
参考：https://github.com/koichi-inoue/MarkdownSample
~
~
**設定
***特殊記号の可視化
TAB[>>]や半角スペース[・]、改行コードの明示をお勧めします。
ATOM > 環境設定 > エディタ設定 > 不可視文字を表示（Show Invisible）
特にコード内の「全角スペースの存在」はトラブルの原因になるので、それを排除するためにも、半角スペースと全角スペースの区別がつくことが重要です。不可視文字の視覚化を行うと半角スペースは[・]で明示されます。
~
***ハードタブとソフトタブ
TABキーを押したときの挙動を設定する項目です。ハードタブは、不可視文字 >> で表示されるもので、当該箇所には TAB コードが入ります。一方ソフトタブは、不可視文字・・で表示されるもので、当該箇所には、半角スペースが入ります。
TABは自動的にインデントをとるのに便利ですが、開くエディタによって、8スペース、4スペース、2スペースなど、挙動が様々なので、どちらかというとソフトタブ、つまり半角スペースをつめていく方がおすすめです。
~
~
**パッケージ
様々な追加パッケージが用意されており、設定メニューからそれをインストールするだけで機能を追加していくことが可能です。
~
***メニューの日本語化
以下の手順でメニュー等の日本語化が可能です。
-Windowメニューの ''Atom > Preferences'' で設定メニューが表示されます。
-その中から ''install'' を選択
-''Search packages'' で 「japanese」という単語を検索します
-「日本語メニュー」というパッケージが見つかるはずです。
-それをインストール＞以上で、メニューが日本語化されます。
~
***自動整形プラグイン
ソースコード全体を自動で綺麗に整形してくれます。
-インストール
-Windowメニューの ''Atom > Preferences'' > ''install'' を選択
-''Search packages'' で 「atom-beautify」を検索・インストール
-使い方
--ソースコードの整形したい部分を選択して、
メニュー＞ Packages ＞ Atom-Beautify ＞ beautify
--どのように整形するか、そのルールは以下から設定可能です。
メニュー＞ Packages ＞ Atom-Beautify ＞ settings
~
***atom-live-server
https://atom.io/packages/atom-live-server
簡易的な Webサーバをローカルに実現することができます。サーバーに置かないと動作しないタイプのプロジェクトの動作確認に使うことができます（PHPには対応していません。PHPを利用する場合は、後述の php-server を）。
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' を選択
--''Search packages'' で 「atom-live-server」を検索・インストール
-使い方
--Webサイトフォルダ全体を Project として開いていることが前提です。
Atomのサイドバーに関連するファイルがすべて見ている状態です。
--サーバーを起動します
メニュー＞ Package ＞ Atom Live Server：Start
--ブラウザが起動して、以下のようなローカルアドレスで開きます。
http://127.0.0.1:3000/
--確認が終了したら、念のため、サーバーは終了しましょう。
メニュー＞ Package ＞ Atom Live Server：Stop
~
***php-server
PHPを用いている動的サイトの動作確認に利用することができます。
https://atom.io/packages/php-server
-''PHP がインストールされていることが前提です。''
--[[Terminal]]から以下のようにタイプしてみて下さい。
$ PHP --version
--以下のようにバージョンが表示されれば、インストール済みです。
PHP 7.3.9 (cli) (built: Aug 30 2019 12:38:27) ( NTS )
Copyright (c) 1997-2018 The PHP Group
：
$
--エラーとなる場合は PHPのインストールが必要です。
[[Google: PHP インストール]]
-インストール
--Windowメニューで ''Atom > Preferences'' > ''install'' を選択
--''Search packages'' で 「php-server」を検索・インストール
-使い方
--フォルダ全体を Project として開いていることが前提です。
Atomのサイドバーに関連するファイルがすべて見ている状態です。
--サーバーを起動します
メニュー＞ Package ＞ PHP Server：Start in Project Root
--ブラウザが起動して、以下のようなローカルアドレスで開きます。
http://localhost:8000/
~
***MiniMap
長いソースコードの全体を縮小表示したマップ画像をウインドウに表示するプラグインです。PhotoShopのナビゲータのように、全体の中のココに移動したい・・という場合に便利です。
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' を選択
--''Search packages'' で 「atom-minimap」を検索・インストール
--「minimap-autohide」もあわせてインストールするとなお便利です。
~
***Atom でTerminal
Atom の画面内で [[Terminal]] が使えるようになります。
-Xcode が必要です。事前に AppStore から Xcodeをインストールして、Atomを再起動して下さい。
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' を選択
--''Search packages'' で 「platformio-ide-terminal」を検索・インストール
-使い方
画面左下の「＋」ボタンで terminal が開きます。
~
***Vimのキー操作を再現
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' を選択
--''Search packages'' で 「Vim-Mode-Plus」を検索・インストール
~
~
**その他
***起動時に前回のウインドウ状態を復元しないようにする
-ATOM > 環境設定 > Core > 起動時に前回のウインドウ状態を復元 → OFF
（ATOM >Preferences > Core > Restore Previous Window On Start → OFF）
~
***保存時に最終行で改行させない
最終行末に勝手に改行コードを入れて欲しくない場合（例えばアクセスカウンター用のデータファイルで、数字が１件のみ記載されてる前提の場合、改行コードが邪魔になるケースがあります）などにこの操作をします。
-環境設定＞パッケージ
-標準パッケージの中に、Whitespace というものがあります。
-その設定で、最初の行 Ensure Single Trailing Newline をオフにします。
~
***TAB や ENTER を検索・置換する方法について（正規表現）
まず [Command] + [F] でフッターに出る検索ダイアログの中の、以下の部分をクリックして、特殊記号の利用を有効にします。
[ .＊ ] : Use Regex
検索・置換フィールドで、以下の入力をすることで、TAB や ENTER を処理対象にすることが可能です。
TAB：\t ENTER：\n
[ \ ]（インバーススラッシュ）は [Option] + [¥] で入力できます。
~
***Atom を [[Terminal]] から起動できるようにする
-一般に、Terminal からカレントディレクトリにある既存のファイルを特定のアプリケーションで開くには、以下のように書きます。
$ open -a Atom ~/sample.txt
-Atom がシステムのデフォルトエディタであれば、以下のようにアプリ名を省略することもできます。
$ open ~/sample.txt
-メニューバーのATOM から「シェルコマンドをインストール」すると、atom コマンドでも起動できるようになります。。
Atom->Install Sell Commands
標準のインストール場所は以下です。
/usr/local/bin/atom
コマンドは、以下のようにタイプします。ファイルが存在しない場合は、新規のファイルとして作成されます。
$ atom ~/sample.txt
~
***Atom で「隠しファイル」を編集する
「隠しファイル」とは、通常の GUI 操作では、フォルダの中に確認することができないファイルです。ユーザーが間違って消すといけないような、設定ファイルの類は、通常隠しファイルとして存在しています。
Macで 隠しファイルの存在を確認するには、Terminal が必要です。以下のようにすると隠しファイルが確認できます。
$ ls -a
隠しファイルには、ファイル名の付け方にルールがあって、一般にファイルの先頭に .（ドット）が付いています。
例）.htaccess
で、この隠しファイルの編集に ATOM のシェルコマンドが役に立つわけです。以下のようにして ATOM を Terminal から起動することで、隠しファイル（ここでは .test.dat とします）を編集・更新することができます。
$ atom .test.dat
~
***Atomの設定を初期化
何らかの操作で、操作環境が戻せなくなった場合、個人の設定ファイルを一旦削除することで初期化可能です（ソフトを捨てて再インストールしても、個人の設定ファイルが残っていると環境は変わりません）。
&color(red){この先の作業は危険を伴います。自己責任で・・};
-Atom は終了します。
-ターミナルを起動します。
-以下のコマンドで、隠しフォルダを含めたホームディレクトリの一覧情報を得ます。
$ ls -a
おそらく .atom という名称のディレクトリがあります。
ここに、個人の設定ファイルがあるので、これを完全に消去することで、Atomに関してまっさらの状態に戻せます。
-以下のコマンドでディレクトリごと削除になります。
$ rm -rf .atom
ReMove（削除）、Recuesive（フォルダ・ファイルを再帰的に）、対象は .atom ディレクトリ・・という意味です。
~
~
***参考動画
#youtube(Y7aEiVwBAdk)
-[[YouTube:Atom.io]]
//|50|50|c
//|#youtube(Y7aEiVwBAdk)|#youtube(U5POoGSrtGg)|
//|紹介動画(日本語字幕)|セットアップ(日本語字幕)|
//
//|50|50|c
//|#youtube(W2gEeFyVEUg)|#youtube(d73r0O5YgrM)|
//|Mac版インストール(英語)|Win版インストール（英語）|
~
//***利用上の注意
//ファイル管理上の混乱を避けるため、不要なファイルは開かない方が賢明で//す。
//-ツリービューに見えているものが現在のディレクトリとは異なる場合があり、混乱することがあります。見えないようにした方が賢明かもしれません。
// 表示 > ツリービュー （これはトグルになっています）
~
~
~
