【情報発信演習】Atomパッケージ等のインストール・設定方法

# はじめに
この記事ではまず授業で利用するAtomパッケージを使うために必要な作業をまとめています．
以下の順に作業を進めていきます

- Githubの登録
- SSHの設定
- gitのインストール・設定
- Atomのインストール
- Atom Packageのインストール・設定

# Githubの登録

まずは[Githubのページ](https://github.com)にアクセス．画面右上の`Sign Up`をクリック
<img width="1552" alt="スクリーンショット 2020-05-10 14.55.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/49f5d075-3df1-9599-9814-104468b06105.png">

任意のUsernameとメールアドレス，パスワードを入力する．
パズルが解けたらその下にある`Create account`ボタンをクリックする．

<img width="1552" alt="スクリーンショット 2020-05-10 15.02.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/e1b8abb1-0084-a94d-fead-b332a8146b3a.png">

いくつかの質問に答える．差し当たり以下の様に選択しておけば良い．
1. What kind of work do you do, mainly? ：Student
2. How much programming experience do you have?：A little
3. What do you plan to use GitHub for?：Learn to Code
<img width="1552" alt="スクリーンショット 2020-05-10 15.09.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/97ec0812-c892-9488-3a99-f24dc5f57aa4.png">
<img width="1552" alt="スクリーンショット 2020-05-10 15.09.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/580a40dd-ebf6-294a-755f-0bc6a166e679.png">

選択したら画面下部にある`Complete setup`ボタンをクリックする．

入力したメールアドレス宛に送られた，Githubの登録を完了させるメールを確認する．
少し待ってもメールが来ない人は`Resend verification email`をクリック．
それでもメールが来ない人は`Change your email setting`をクリックしてメールアドレスを変更する．

<img width="1552" alt="スクリーンショット 2020-05-10 15.13.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/7baba1d9-bb5c-4c51-a0a6-6ce3d80275cb.png">

メールが来たら`Verify email address`ボタンをクリックする．

<img width="1552" alt="スクリーンショット 2020-05-10 15.14.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/8c63d7d1-e944-78dd-f209-af878d3c49ce.png">

画面上部に`Your email was verified`と表示されていれば成功．
後でGithubの設定をするので，画面下部にある`Skip for now`をクリックしてページを開いておく．
<img width="1552" alt="スクリーンショット 2020-05-10 16.17.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/363893ab-f819-e041-95c6-64ea4ecaefed.png">





# SSHの設定

詳細は以下のチュートリアル動画をご覧ください．

- Windowsの人 [SSH公開鍵認証の設定方法 ( Windows編 )](https://youtu.be/2ckB5a48pbY)
- Macの人 [SSH公開鍵認証の設定方法 ( Mac編 )](https://youtu.be/1sSJ2zyJrBc)


以下は作業手順

まずSSHクライアントがインストールされているかどうかを確認する．
Windowsの人はコマンドプロンプト，Macの人はターミナルを起動して以下のコマンドを入力する

```sh
ssh -V
```

以下のような出力がされれば，SSHクライアントがインストールされている．

```
OpenSSH_for_Windows_7.7p1, LibreSSL 2.6.5 　 # Windowsの人
OpenSSH_7.9p1, LibreSSL 2.7.3             　 # Macの人
Open SSH_8.0p1 Ubuntu-6build1, ...          # Linux(Ubuntu)の人
```

---
**SSHクライアントがインストールされていない人**は以下の操作を実行してください．(主にWindows8の人)

### Windows8の人
1. コマンドプロンプトを起動する
2. `systeminfo`と入力する
3. 「システムの種類」が`x64_based PC`か`x86_based PC`かを確認
4. [SSHのダウンロードページ](https://github.com/PowerShell/Win32-OpenSSH/releases)にアクセス
5. システムの種類に合わせてzipフォルダをダウンロードする
    1. `x64_based PC`の人：[OpenSSH-Win64.zip](https://github.com/PowerShell/Win32-OpenSSH/releases/download/v8.1.0.0p1-Beta/OpenSSH-Win64.zip)
    2. `x86_based PC`の人：[OpenSSH-Win32.zip](https://github.com/PowerShell/Win32-OpenSSH/releases/download/v8.1.0.0p1-Beta/OpenSSH-Win32.zip)
6. ダウンロードしたzipフォルダをダブルクリックして解凍し，できたフォルダをエクスプローラーでC:¥にコピぺ
7. スタート画面の検索欄に`環境変数`と入力し，`システム環境変数の変数`を選択
8. `システム環境変数`中の`Path`を選択し，`編集`ボタンをクリック
9. 変数値の末尾に`;C:¥OpenSSH-Win64`または`;C:¥OpenSSH-Win32`と入力してOKをクリック
10. コマンドプロンプトを開き直して`ssh -V`でインストールできたか確認する
    - このとき画面・文字サイズが小さくなった場合はウィンドウ左上のアイコンをクリックしてプロパティを選択し，フォントタブからフォントをConsolas，サイズを24に設定する

![command_prompt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/8b4ec15a-b6b9-31c1-4fba-bf44d55fb420.png)

![64_32.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/90199fce-68f4-5ec8-84b6-6642f3d8e13a.png)

[SSHフォルダをC:¥にコピペするスクリーンショット]

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/060eb0d7-ef80-ad73-0f3d-ed5fec014e8e.png)
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/2acc7e75-d084-3536-5df6-029077708288.png)
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/d9af6fd6-31f8-1138-f645-b07acf58c3f8.png)


---

### sshの設定(公開鍵認証)

Winodwsの人はコマンドプロンプト，Macの人はターミナルを開いて以下のコマンドを打つ

```ssh
# windowsの人
cd %homepath% 
mkdir .ssh
cd .ssh   
ssh-keygen    

# Macの人
cd
mkdir .ssh
cd .ssh
ssh-keygen
```

ssh-keygenと入力した後，以下の様に入力を求められるので，全てEnterを押していく

- Enter file in which to save the key
- Enter passphrase
- Enter passphrase again

その後公開鍵と秘密鍵のペアが作成される．
![ssh-keygen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/b11e32b1-2f6e-6992-db7c-eeeb0eaa973c.png)



以下のコマンドで~/.ssh以下に`id_rsa`と`id_rsa.pub`ができていることを確認する

- Windowsの人：dirと入力
- Macの人：lsと入力

後で.sshフォルダにできた`id_rsa.pub`をBEEFに提出するので，このままウィンドウを開いておく．


    
### Githubへ公開鍵を登録する
自分のGithubのページを開き，右上のアイコンをクリックしてからSettingsをクリックする
<img width="1552" alt="スクリーンショット 2020-05-10 16.37.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/d1bde042-8cfc-e734-367c-d746ba771ded.png">

SSH and GPG keysをクリックして，`New SSH key`ボタンをクリックする
<img width="1552" alt="スクリーンショット 2020-05-10 16.40.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/ca3ffe4c-e65f-7a1c-2510-cbd363cdbd34.png">

Titleに適当な名前(public_key)を入力する．
その後コマンドプロンプト/ターミナルを開き，以下のコマンドで公開鍵をクリップボードにコピーする．

```sh
# Windowsの人はC:¥Users¥ユーザー名¥.sshに
# Macの人は/Users/ユーザー名/.ssh または ~/.ssh にいることを確認して

# Windowsの人
clip < id_rsa.pub

# Macの人
pbcopy < id_rsa.pub
```

Githubのページに戻り，一度Key欄をクリックしてからペーストする．
Windowsの人はCtrl-v，Macの人はCommand-vでペーストできる．
入力できたら`Add SSH key`を押す

<img width="1552" alt="スクリーンショット 2020-05-10 16.49.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/9cbe217b-2dbc-bf1f-85a5-8c2d48b8c70d.png">

以下の様に公開鍵が登録されていれば成功．
<img width="1552" alt="スクリーンショット 2020-05-10 16.51.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/0f15e909-0011-6502-0400-91e4cfeb3497.png">


### 公開鍵をBEEFで提出

そのまま公開鍵(id_rsa.pub)がクリップボードにコピーされている状態で作業を行う．
BEEFの公開鍵を提出するページに行き，入力欄にペーストして送信する．
[BEEFリンク](https://beef.center.kobe-u.ac.jp/mod/assign/view.php?id=58354)


# gitのインストール

[gitのダウンロードページ](https://git-scm.com/downloads)にアクセスし，自分のOS用のインストーラをダウンロードする．ここではWindowsでのインストール方法を紹介する．

<img width="1531" alt="スクリーンショット 2020-04-07 16.05.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/26f2f4aa-8d8b-164a-65d4-3e92caacc69e.png">

ダウンロードしたインストーラをダブルクリックして実行する．ウィンドウが開いたら`next`をクリックしていき`install`ボタンを押す
![a.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/1f766850-c10c-2118-92d0-d3d3de5f026e.png)

Macの人でインストーラを開けない場合は，システム環境設定 -> セキュリティとプライバシー -> 一般を開いて，gitインストーラが表示されている右の「このまま開く」をクリックしてインストールを進める．

[「セキュリティとプライバシー」のスクリーンショット]

インストールが完了したら，Windowsの人はコマンドプロンプトで，Macの人はターミナルを一度終了させる．その後再び起動させ，`git --version`と入力し，インストールできたか確認する．何らかのversionが表示されれば成功!

<img width="254" alt="スクリーンショット 2020-04-07 16.24.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/eede1104-6516-0e75-b408-0e82e311c5dd.png">

バージョンが出ない場合は，今開いているコマンドプロンプト/ターミナルでgitのPATHが通っていない可能性がある．一度コマンドプロンプト/ターミナルを終了させ，再び起動して上記のコマンドを試してみる．

### gitの設定

gitを利用するため，ユーザー名とメールアドレスを設定する．コマンドプロンプトまたはターミナルを開いて，以下のようにコマンドを打つ．nameとemailは基本的にGithubの登録と同じにすれば良い．

```sh
git config --global user.name "John Doe" # " "内に自分に名前をローマ字で入れる
git config --global user.email johndoe@example.com # 自分のメールアドレスを入れる．""は不要．

# できたら確認のため，以下のコマンドを打つ．自分が入力した値が出力されるはず．
git config --global user.name
git config --global user.email
```


# Atomのインストール

[Atomのダウンロードサイト](https://atom.io)にアクセス
<img width="1531" alt="スクリーンショット 2020-04-07 17.01.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/fb7e37f8-8276-5b80-dd6e-41f6f0ccf0e7.png">

`Download`ボタンを 押してダウンロードする．

Windowsの人はインストーラをダブルクリックして実行し，インストールする．
Macの人はアプリをアプリケーションフォルダにコピーする．


# Atomパッケージのインストール・設定方法

詳細は以下のチュートリアル動画をご覧ください．

---

**重要**
`Atomパッケージの設定はBeefで課題にAtomパッケージの設定方法が追加されてから行ってください．`

この時自分の学籍番号と氏名を入力する手順がありますが，以下の例に従って入力してください．
学籍番号：半角英数字  例) 123c456c
氏名：半角ローマ字で名字(Family Name)・名前(Given Name)の順
例) 執行健人 → Shigyo Kento

---

- Windowsの人 [Atomパッケージのインストール・設定方法 Windows編](https://www.youtube.com/watch?v=2HpI9hV2_3M)
- Macの人 [Atomパッケージのインストール・設定方法 Mac編](https://www.youtube.com/watch?v=Uh5R8q_Ffd0) (※)

(※)Macの人はペーストのショートカットキーはCtrl-vではなくCommand-vです

以下は作業手順

### Atomパッケージのインストール方法

1 Atomのパッケージが管理されている[Githubリポジトリ](https://github.com/kenglwo/atom-package)にアクセスする．
2 `clone or download`をクリックして，URLが書いてある右の矢印ボタンをクリック．これでURLがクリップボードにコピーされる．
3 コマンドプロンプト/ターミナルを開く
4 以下のコマンドでAtomのパッケージを保存するフォルダに移動する

```sh
# Windowsの人
cd %homepath%
cd .atom¥packages

#　Macの人
cd
cd .atom/packages

```



5 `git clone `と打った後にURLをペースト(WindowsはCtrl-v，MacはCommand-v)．その後Enterを押す

```sh
git clone https://github.com/kenglwo/atom-package.git (Enterを押す)
```

これでAtomパッケージのインストールは完了


---
(パッケージをダウンロードする場合)
①"Clone or Download"，②Download ZIPの順にクリックしてパッケージ(atom-package-master)をダウンロードする．
<img width="1200" alt="スクリーンショット 2020-04-28 14.20.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/b31acbd8-7000-50ac-5379-fca8a3d02f0e.png">

"ダウンロード"フォルダにあるatom-package-masterをコピーして，ホームディレクトリ下の.atom/packagesにペーストする．
Macの人で隠しフォルダ(.atom)が見えていない人は，Command-Shift-. で見えるようになる，

<img width="1073" alt="スクリーンショット 2020-04-28 14.27.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/c2504bcd-bf56-e91e-b277-00fbad977442.png">

---


Atomを起動して，以下の手順でパッケージがインストールされたか確認する

画面上部にあるツールバーからAtom ➡︎ Preferencesをクリック
<img width="1440" alt="スクリーンショット 2020-04-28 18.47.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/064987d7-cd3c-7125-1e46-71c5f9a95b7f.png">

Packagesをクリックし，検索ボックスに`atom-package`と入力する．atom-packageが出てくればインストールされている．

<img width="1440" alt="スクリーンショット 2020-04-28 18.48.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/b3cf86a8-d7c6-5832-fd2b-4f088bbdea43.png">



### Atom パッケージの設定方法

**重要**
`この作業はBeefで課題にAtomパッケージの設定方法が追加されてから行ってください．`

1 Atomにパッケージがインストールされている状態で，ファイルを新規作成する
画面上部のツールバーからFile ➡︎ New File をクリック (またはMacの人はCommand-n，Windowsの人はCtrl-n)

<img width="1440" alt="スクリーンショット 2020-04-28 18.52.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/d172a0f6-b4fb-0bd0-812b-b994bc9220e6.png">

2 画面上部のツールバーからFile ➡︎ Save をクリック (またはMacの人はCommand-s，Windowsの人はCtrl-s) して適当なファイル名をつける(ここではtest.html)．
ドキュメントの中に授業用のフォルダ(r2enshu2)を新規作成し，その中にファイルを保存する．



3 右下の保存を押すと以下のような`Please input credentials`と書かれたウィンドウが表示されるので，OKを押して次に表示されるウィンドウに情報を入力する．

4 ２つの入力欄に，自分の学籍番号(半角英数字)，名前を入力する．

5 OKを推して`Login Success`とでたら成功．

入力ウィンドウは`Ctrl-i`で表示/非表示を切り替えることができる．
(今のところ）授業や課題の作業中にr2enshu2フォルダ内のファイルを編集するときは，初回にファイルを保存すると入力ウィンドウが開くので，その度に値を入力してOKを押してください．