Atom
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Atom
[[TextEditor]]
&color(red){2022年6月 GitHub は Atom の開発終了を宣言しま...
&color(blue){''テキストエディタを初めて導入する方へ''&br;...
~
Atom(アトム)は、2014年にGithubから公開されたオープンソー...
HTML、CSS、Javascriptほか、コード入力のサポート機能はもち...
~
***CONTENTS
#contents2_1
~
~
**基本操作
***ペイン分割
HTMLとCSSなど２つのファイルを同時に開いている場合、ペイン...
表示 > ペイン分割 [上下左右]
ShortCut：[Commamd]+[K] > [→] （Command + k を一旦離して...
~
***行の折り返し
一行が長く、ソースが読みにくい場合は、以下のようにします。
表示 > 自動折り返しの切り替え （これはトグルになってい...
~
***文字サイズの拡大・縮小
ブラウザのインターフェイスと同様です。
COMMAND [+] で拡大 / COMMAND [-] で縮小
~
***HTML入力サポートの活用
HTMLの入力では、タグ名＋[TAB] で、開始タグ（+基本属性）・...
-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の入力では、セレクタ名の入力中、プロパティーの入力中に...
-プロパティー名
入力をはじめると、自動的に候補が出現します。
-[COMMAND] + [/]
選択した範囲がコメントアウトされます。
/*
：
*/
~
***その他の入力サポート
-[[Google:Atom ショートカット]]
-[[Atom 12の小技>https://www.sitepoint.com/12-favorite-at...
~
***検索・置換の活用
[Command] + [F] ← 多くのソフトで共通です（ブラウザも）
-画面下に、Find と Replace の２つの入力エリアが表示されま...
-Findの欄に検索したい文字列を入力して[Find]とすると発見で...
-文字列を一挙に別の文字列に置き換えるには、Replaceの欄に...
~
***MarkDownファイルの表示
拡張子.md のファイルは [[Markdown]] 形式（代表例 Wikiの表...
CTRL + SHIFT + m
参考：https://github.com/koichi-inoue/MarkdownSample
~
~
**設定
***特殊記号の可視化
TAB[>>]や半角スペース[・]、改行コードの明示をお勧めします。
ATOM > 環境設定 > エディタ設定 > 不可視文字を表示（Show...
特にコード内の「全角スペースの存在」はトラブルの原因にな...
~
***ハードタブとソフトタブ
TABキーを押したときの挙動を設定する項目です。ハードタブは...
TABは自動的にインデントをとるのに便利ですが、開くエディタ...
~
~
**パッケージ
様々な追加パッケージが用意されており、設定メニューからそ...
~
***メニューの日本語化
以下の手順でメニュー等の日本語化が可能です。
-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サーバをローカルに実現することができます。サ...
-インストール
--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
長いソースコードの全体を縮小表示したマップ画像をウインド...
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「atom-minimap」を検索・インスト...
--「minimap-autohide」もあわせてインストールするとなお便...
~
***Atom でTerminal
Atom の画面内で [[Terminal]] が使えるようになります。
-Xcode が必要です。事前に AppStore から Xcodeをインストー...
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「platformio-ide-terminal」を検...
-使い方
画面左下の「＋」ボタンで terminal が開きます。
~
***Vimのキー操作を再現
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「Vim-Mode-Plus」を検索・インス...
~
~
**その他
***起動時に前回のウインドウ状態を復元しないようにする
-ATOM > 環境設定 > Core > 起動時に前回のウインドウ状態を...
（ATOM >Preferences > Core > Restore Previous Window On S...
~
***保存時に最終行で改行させない
最終行末に勝手に改行コードを入れて欲しくない場合（例えば...
-環境設定＞パッケージ
-標準パッケージの中に、Whitespace というものがあります。
-その設定で、最初の行 Ensure Single Trailing Newline を...
~
***TAB や ENTER を検索・置換する方法について（正規表現）
まず [Command] + [F] でフッターに出る検索ダイアログの中の...
[ .＊ ] : Use Regex
検索・置換フィールドで、以下の入力をすることで、TAB や EN...
TAB：\t ENTER：\n
[ \ ]（インバーススラッシュ）は [Option] + [¥] で入力でき...
~
***Atom を [[Terminal]] から起動できるようにする
-一般に、Terminal からカレントディレクトリにある既存のフ...
$ open -a Atom ~/sample.txt
-Atom がシステムのデフォルトエディタであれば、以下のよう...
$ open ~/sample.txt
-メニューバーのATOM から「シェルコマンドをインストール」...
Atom->Install Sell Commands
標準のインストール場所は以下です。
/usr/local/bin/atom
コマンドは、以下のようにタイプします。ファイルが存在しな...
$ atom ~/sample.txt
~
***Atom で「隠しファイル」を編集する
「隠しファイル」とは、通常の GUI 操作では、フォルダの中に...
Macで 隠しファイルの存在を確認するには、Terminal が必要で...
$ ls -a
隠しファイルには、ファイル名の付け方にルールがあって、一...
例）.htaccess
で、この隠しファイルの編集に ATOM のシェルコマンドが役に...
$ atom .test.dat
~
***Atomの設定を初期化
何らかの操作で、操作環境が戻せなくなった場合、個人の設定...
&color(red){この先の作業は危険を伴います。自己責任で・・};
-Atom は終了します。
-ターミナルを起動します。
-以下のコマンドで、隠しフォルダを含めたホームディレクトリ...
$ ls -a
おそらく .atom という名称のディレクトリがあります。
ここに、個人の設定ファイルがあるので、これを完全に消去す...
-以下のコマンドでディレクトリごと削除になります。
$ rm -rf .atom
ReMove（削除）、Recuesive（フォルダ・ファイルを再帰的に）...
~
~
***参考動画
#youtube(Y7aEiVwBAdk)
-[[YouTube:Atom.io]]
//|50|50|c
//|#youtube(Y7aEiVwBAdk)|#youtube(U5POoGSrtGg)|
//|紹介動画(日本語字幕)|セットアップ(日本語字幕)|
//
//|50|50|c
//|#youtube(W2gEeFyVEUg)|#youtube(d73r0O5YgrM)|
//|Mac版インストール(英語)|Win版インストール（英語）|
~
//***利用上の注意
//ファイル管理上の混乱を避けるため、不要なファイルは開か...
//-ツリービューに見えているものが現在のディレクトリとは異...
// 表示 > ツリービュー （これはトグルになっています）
~
~
~
終了行:
*Atom
[[TextEditor]]
&color(red){2022年6月 GitHub は Atom の開発終了を宣言しま...
&color(blue){''テキストエディタを初めて導入する方へ''&br;...
~
Atom(アトム)は、2014年にGithubから公開されたオープンソー...
HTML、CSS、Javascriptほか、コード入力のサポート機能はもち...
~
***CONTENTS
#contents2_1
~
~
**基本操作
***ペイン分割
HTMLとCSSなど２つのファイルを同時に開いている場合、ペイン...
表示 > ペイン分割 [上下左右]
ShortCut：[Commamd]+[K] > [→] （Command + k を一旦離して...
~
***行の折り返し
一行が長く、ソースが読みにくい場合は、以下のようにします。
表示 > 自動折り返しの切り替え （これはトグルになってい...
~
***文字サイズの拡大・縮小
ブラウザのインターフェイスと同様です。
COMMAND [+] で拡大 / COMMAND [-] で縮小
~
***HTML入力サポートの活用
HTMLの入力では、タグ名＋[TAB] で、開始タグ（+基本属性）・...
-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の入力では、セレクタ名の入力中、プロパティーの入力中に...
-プロパティー名
入力をはじめると、自動的に候補が出現します。
-[COMMAND] + [/]
選択した範囲がコメントアウトされます。
/*
：
*/
~
***その他の入力サポート
-[[Google:Atom ショートカット]]
-[[Atom 12の小技>https://www.sitepoint.com/12-favorite-at...
~
***検索・置換の活用
[Command] + [F] ← 多くのソフトで共通です（ブラウザも）
-画面下に、Find と Replace の２つの入力エリアが表示されま...
-Findの欄に検索したい文字列を入力して[Find]とすると発見で...
-文字列を一挙に別の文字列に置き換えるには、Replaceの欄に...
~
***MarkDownファイルの表示
拡張子.md のファイルは [[Markdown]] 形式（代表例 Wikiの表...
CTRL + SHIFT + m
参考：https://github.com/koichi-inoue/MarkdownSample
~
~
**設定
***特殊記号の可視化
TAB[>>]や半角スペース[・]、改行コードの明示をお勧めします。
ATOM > 環境設定 > エディタ設定 > 不可視文字を表示（Show...
特にコード内の「全角スペースの存在」はトラブルの原因にな...
~
***ハードタブとソフトタブ
TABキーを押したときの挙動を設定する項目です。ハードタブは...
TABは自動的にインデントをとるのに便利ですが、開くエディタ...
~
~
**パッケージ
様々な追加パッケージが用意されており、設定メニューからそ...
~
***メニューの日本語化
以下の手順でメニュー等の日本語化が可能です。
-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サーバをローカルに実現することができます。サ...
-インストール
--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
長いソースコードの全体を縮小表示したマップ画像をウインド...
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「atom-minimap」を検索・インスト...
--「minimap-autohide」もあわせてインストールするとなお便...
~
***Atom でTerminal
Atom の画面内で [[Terminal]] が使えるようになります。
-Xcode が必要です。事前に AppStore から Xcodeをインストー...
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「platformio-ide-terminal」を検...
-使い方
画面左下の「＋」ボタンで terminal が開きます。
~
***Vimのキー操作を再現
-インストール
--Windowメニューの ''Atom > Preferences'' > ''install'' ...
--''Search packages'' で 「Vim-Mode-Plus」を検索・インス...
~
~
**その他
***起動時に前回のウインドウ状態を復元しないようにする
-ATOM > 環境設定 > Core > 起動時に前回のウインドウ状態を...
（ATOM >Preferences > Core > Restore Previous Window On S...
~
***保存時に最終行で改行させない
最終行末に勝手に改行コードを入れて欲しくない場合（例えば...
-環境設定＞パッケージ
-標準パッケージの中に、Whitespace というものがあります。
-その設定で、最初の行 Ensure Single Trailing Newline を...
~
***TAB や ENTER を検索・置換する方法について（正規表現）
まず [Command] + [F] でフッターに出る検索ダイアログの中の...
[ .＊ ] : Use Regex
検索・置換フィールドで、以下の入力をすることで、TAB や EN...
TAB：\t ENTER：\n
[ \ ]（インバーススラッシュ）は [Option] + [¥] で入力でき...
~
***Atom を [[Terminal]] から起動できるようにする
-一般に、Terminal からカレントディレクトリにある既存のフ...
$ open -a Atom ~/sample.txt
-Atom がシステムのデフォルトエディタであれば、以下のよう...
$ open ~/sample.txt
-メニューバーのATOM から「シェルコマンドをインストール」...
Atom->Install Sell Commands
標準のインストール場所は以下です。
/usr/local/bin/atom
コマンドは、以下のようにタイプします。ファイルが存在しな...
$ atom ~/sample.txt
~
***Atom で「隠しファイル」を編集する
「隠しファイル」とは、通常の GUI 操作では、フォルダの中に...
Macで 隠しファイルの存在を確認するには、Terminal が必要で...
$ ls -a
隠しファイルには、ファイル名の付け方にルールがあって、一...
例）.htaccess
で、この隠しファイルの編集に ATOM のシェルコマンドが役に...
$ atom .test.dat
~
***Atomの設定を初期化
何らかの操作で、操作環境が戻せなくなった場合、個人の設定...
&color(red){この先の作業は危険を伴います。自己責任で・・};
-Atom は終了します。
-ターミナルを起動します。
-以下のコマンドで、隠しフォルダを含めたホームディレクトリ...
$ ls -a
おそらく .atom という名称のディレクトリがあります。
ここに、個人の設定ファイルがあるので、これを完全に消去す...
-以下のコマンドでディレクトリごと削除になります。
$ rm -rf .atom
ReMove（削除）、Recuesive（フォルダ・ファイルを再帰的に）...
~
~
***参考動画
#youtube(Y7aEiVwBAdk)
-[[YouTube:Atom.io]]
//|50|50|c
//|#youtube(Y7aEiVwBAdk)|#youtube(U5POoGSrtGg)|
//|紹介動画(日本語字幕)|セットアップ(日本語字幕)|
//
//|50|50|c
//|#youtube(W2gEeFyVEUg)|#youtube(d73r0O5YgrM)|
//|Mac版インストール(英語)|Win版インストール（英語）|
~
//***利用上の注意
//ファイル管理上の混乱を避けるため、不要なファイルは開か...
//-ツリービューに見えているものが現在のディレクトリとは異...
// 表示 > ツリービュー （これはトグルになっています）
~
~
~
ページ名:
