Help us understand the problem. What is going on with this article?

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

はじめに

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

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

Githubの登録

まずはGithubのページにアクセス.画面右上のSign Upをクリック
スクリーンショット 2020-05-10 14.55.11.png

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

スクリーンショット 2020-05-10 15.02.48.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
スクリーンショット 2020-05-10 15.09.30.png
スクリーンショット 2020-05-10 15.09.55.png

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

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

スクリーンショット 2020-05-10 15.13.42.png

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

スクリーンショット 2020-05-10 15.14.27.png

画面上部にYour email was verifiedと表示されていれば成功.
後でGithubの設定をするので,画面下部にあるSkip for nowをクリックしてページを開いておく.
スクリーンショット 2020-05-10 16.17.48.png

SSHの設定

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

以下は作業手順

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

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 PCx86_based PCかを確認
  4. SSHのダウンロードページにアクセス
  5. システムの種類に合わせてzipフォルダをダウンロードする
    1. x64_based PCの人:OpenSSH-Win64.zip
    2. x86_based PCの人: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

64_32.PNG

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

キャプチャ.PNG
キャプチャ2.PNG
キャプチャ3.PNG


sshの設定(公開鍵認証)

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

# 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

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

  • Windowsの人:dirと入力
  • Macの人:lsと入力

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

Githubへ公開鍵を登録する

自分のGithubのページを開き,右上のアイコンをクリックしてからSettingsをクリックする
スクリーンショット 2020-05-10 16.37.59.png

SSH and GPG keysをクリックして,New SSH keyボタンをクリックする
スクリーンショット 2020-05-10 16.40.24.png

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

# 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を押す

スクリーンショット 2020-05-10 16.49.26.png

以下の様に公開鍵が登録されていれば成功.
スクリーンショット 2020-05-10 16.51.22.png

公開鍵をBEEFで提出

そのまま公開鍵(id_rsa.pub)がクリップボードにコピーされている状態で作業を行う.
BEEFの公開鍵を提出するページに行き,入力欄にペーストして送信する.
BEEFリンク

gitのインストール

gitのダウンロードページにアクセスし,自分のOS用のインストーラをダウンロードする.ここではWindowsでのインストール方法を紹介する.

スクリーンショット 2020-04-07 16.05.06.png

ダウンロードしたインストーラをダブルクリックして実行する.ウィンドウが開いたらnextをクリックしていきinstallボタンを押す
a.PNG

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

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

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

スクリーンショット 2020-04-07 16.24.43.png

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

gitの設定

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

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のダウンロードサイトにアクセス
スクリーンショット 2020-04-07 17.01.32.png

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

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

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

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


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

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


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

以下は作業手順

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

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

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

# Macの人
cd
cd .atom/packages

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

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

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


(パッケージをダウンロードする場合)
①"Clone or Download",②Download ZIPの順にクリックしてパッケージ(atom-package-master)をダウンロードする.
スクリーンショット 2020-04-28 14.20.43.png

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

スクリーンショット 2020-04-28 14.27.08.png


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

画面上部にあるツールバーからAtom ➡︎ Preferencesをクリック
スクリーンショット 2020-04-28 18.47.09.png

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

スクリーンショット 2020-04-28 18.48.24.png

Atom パッケージの設定方法

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

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

スクリーンショット 2020-04-28 18.52.06.png

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

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

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

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

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

kenglwo
VimのちEmacs
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away