Atom package自作② -基本操作-

# 基本操作
まずパッケージの作成方法や、作成するにあたり必要な情報を纏めていきます。

## テンプレートパッケージの作成
Atom にはパッケージを作る為のパッケージなる物が存在する。
その名も *package Generater*
ﾍﾞﾝﾘﾀﾞﾈｰ　ﾍﾞﾝﾘﾀﾞﾖｰ選択しパッケージ名を指定すれば必要な物が一式作れちゃいます。
ハマるもクソもない位簡単に出来ます。
※ [ 手順は下記へ纏めています ](#パッケージの作成)

そんなハマる所が無いのに私は一点だけハマってしまいましたｗｗｗｗ
node.jsとか色々弄ってる方なら当り前の事なのかどうなのか解りませんが、

*文中に大文字を入れると[-]+小文字に置換されます*

私はいつもプロジェクトとか作る際に[-]とか大文字とか使っちゃうのですが初めて作った時に全て大文字で作成したら1文字づつ[-]が付いた状態で作成されてしまい焦っちゃいました。。。。

## テンプレートパッケージディレクトリ構成
結構簡単にテンプレートは作成されちゃいましたが、ファイルやらディレクトリやらが作られちゃってますねー。
これ全部設定しないとイケナイノ―　面倒ですねー
面倒だと思うけど実際調べたら面倒じゃなかった。
初めて独りで電車乗って、知らない街へ降りたら地元とあんまり変わらない位面倒じゃなかった。そんな感じです。

まぁとりあえずプロジェクトには下記のディレクトリとファイルが作成されてます。

| ファイル名 | 概要 |
|:-:|:-:|
| keymaps  |  アクションに対するショートカットキーを設定するファイルを格納|
| lib  | メインスクリプトとかビューファイルとかが格納される  |
| menus  | ヘッダーに表示されるメニュー等を作成するファイルを格納  |
| spec  |  コードの検証用ツールが格納されている |
| styles| GUIを設定するlessファイルを格納  |
| package.json| パッケージの設定ファイル  |
| .gitignore| git上で管理する為の設定ファイル  |
　
細かい所は後日に説明します。

## デバックビューの表示
プロジェクトをガシガシ修正してパッケージを作成する上で必要となるのがコンソール。
AtomはChromeとおんなじ開発者ツールが実装されています。
ネットサーフィンやっててレイアウトが崩れて欲しい情報が見ずらい時とりあえず[F12](Macだと[command]+[Opt]+[I])を押下していらない部分を消したりなんだったりする時と同じ要領で修正・確認が出来ちゃうって事です。
ショートカットキーは[Ctrl]+[Shift]+[I](Macだと[Alt]+[cmd]+[i])
※[メニューからの表示方法は下記へ記載しております。](#デバックビューの表示-1)

## 修正したパッケージの反映(Atom再読み込み)

プロジェクトをガシガシ作成してるとたまーに度々にツールを動かしたくなる時がきちゃいます。
で、登録されているショートカットキーを実行しても修正分は読み込まれない。。スクリプトみたいにhtmlみたいに自動的に反映されない。。。
修正というかパッケージの読み込みタイミングは現在解っている段階で起動時もしくは再読み込み処理が発生した時です。
なので実行したい時はパッケージを再読み込みさせないとならんのです。。ならんものはならんのです。。。
再読み込みのショートカットキーは[Ctrl]+[Shift]+[F5](Macだと[Ctrl]+[Alt]+[command]+[L])
※[メニューからの表示方法は下記へ記載しております。](#atom再読み込み)

## モジュールのインストール

パッケージを作る際、標準モジュールだけじゃ機能を実装する事ができない時がめっちゃあります。
じゃあどうする？作る？面倒です！
ならばどうする？
Atomは基本、node.jsが使用できます。てか実装はnode.jsでやっていきます
だからnode.jsのモジュールを追加すればよいのです。
で、追加方法ですが私の場合だと、atom上からモジュールを導入する方法が解らないのでCUI上から実施してます。
(atom上にて追加する方法があれば教えて頂きたい)

やり方としては、自分一人で使用するならば適当なディレクトリでnpmコマンドを実行すれば良いのですが
作ったからには公開したいですよね？
ならば、パッケージのディレクトリ内にてnpmコマンドを実行する必要があります。
で、
で、パッケージのフルパスなんて覚えられないです。てか覚える必要がない。
Atomのtreeviewにて右クリックで[Copy Full Path]ってので取得出来ちゃうんです。便利ですねー
でcopyしたパスでターミナルアプリから対象のディレクトリに下り、npmコマンドを実行しちゃえば一発ではいっちゃいます　。
嘘です。私のwindows環境では初期npmのPATHが通ってなかったので通す作業がありました。。。。
ちなみに、環境によって違うと思うのですが私の環境だと下記にnpmコマンドが格納されてました。
■格納場所：C:\Users\【ユーザ】\AppData\Local\atom\app-1.23.2\resources\app\apm\bin\

※PATHの通し方は知っていると思うので割愛します。

で、npm コマンドですが、下記の通り打てばとりあえず入ります。
■コマンド：npm -s install 【モジュール名】

オプションの[-s]は　パッケージのモジュール管理をしている[package.json]に追加したモジュールを追記してくれる機能です。

で追加すると[node_modules]というディレクトリが作成されその中に追加したモジュールの実体が格納されます。
CUI上の操作を纏めると、

＞cd 【パッケージディレクトリ】
＞npm -s install 【モジュール】
＞dir
.
.
YYYY/MM/DD  hh:mm    <DIR>          node_modules

てなぁ感じで作成されます。


# まとめ
今回、下記について説明をしました。
 - [テンプレートパッケージの作成](#テンプレートパッケージの作成)
 - [テンプレートパッケージディレクトリ構成](#テンプレートパッケージディレクトリ構成)
 - [デバックビューの表示](#デバックビューの表示)
 - [修正したパッケージの反映(Atom再読み込み)](#修正したパッケージの反映atom再読み込み)
 - [モジュールのインストール](#モジュールのインストール)


上記の操作さえ解っていればパッケージ作成出来るかなと思います。
次回からは各ファイルを説明していきます！


***
# 手順
## パッケージの作成
1.　Atomの起動
2.　menuより[packages]>[Package Generater]>[Generate Atom Package]を選択
![make_packages1.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/d889de1c-ca0a-2e6e-c3f2-e73e61b23a1b.jpeg)

3.　Enter Package Pathとポップアップが発生するので格納先path及びパッケージ名を指定し[Enter]を押下
![make_packages2.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/16d4449a-ca6f-440f-9d4f-52ed5e42419f.jpeg)

⇒初期テンプレートによりpackageが作成される
![make_packages3.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/05f6a5b6-d077-b079-822c-4ae160772586.jpeg)

##デバックビューの表示
1. menuより[View]>[Developer]>[Toggle Developer tools]を選択
![make_packages4.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/b61a946a-2702-823d-63cf-39a8e8e27a35.jpeg)

⇒デバックビューが表示される
![make_packages5.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/90bca90d-8ec3-155c-dba3-933568a25757.jpeg)

## Atom再読み込み

1. menuより[View]>[Developer]>[Toggle Command Pallet]を選択
![make_packages7.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/3fa0e6dc-fbf9-9dac-e0b9-fcac3813f467.jpeg)

2. 表示されたパレットにて[Window Reload]を入力し[Enter]を押下
![make_packages8.jpg](https://qiita-image-store.s3.amazonaws.com/0/141926/b4abc01e-7966-4aa8-be62-2ed5e9a7d6f1.jpeg)