ATOM GIT

テキストエディタ「ATOM」でGithubと連携させる方法

今回は弊社のデザイナーが使用している無料テキストエディタ「ATOM」と
社内でファイルを管理しているツール「Git」との連携方法を説明していこうと思います。


「ATOM」のダウンロード

まずはATOMの公式webサイトからダウンロードしてください。
https://atom.io/


ダウンロードしたAtomSetup-x〇〇.exeというファイルをクリックすると
ATOMのインストーラーが立ち上がりインストールを開始します。


しばらくするとATOMが立ち上がります。


ATOMの日本語化

このままだと英語表記でわかりずらいと思うので日本語化パッケージをいれていきます。


メニューバー「Help」から「WelCome Guide」を選択
「Install a Package」の項目で「Open Installer」をクリック
search packagesと書かれているフォームに「japanese-menu」と入力し「Packages」をクリック
一番上に出てきた「japanese-menu」をインストール


ATOMの日本語化が完了しました。


GitHub でリポジトリを作成する

Githubの公式webサイトにログインし,Your Repositoriesのページで緑色のNEWボタンをクリック
github Your Repositoriesのページ


「Create a new Repository」のページが開くので「Repository name」の欄に新しいRepositoryにつける任意の名前を(ここではatom_git_testにしました)入力し、下部の「create Repository」をクリックすればRepository作成完了です。



出来たレポジトリ画面の緑のcodeボタンにカーソルを合わせるとプルダウンが開きます。その中のアドレスを後程使うので、控えておきます。


ATOMでリポジトリを取得する

作ったレポジトリのクローンを入れる空のフォルダをPCの任意の場所に新規で作成します。
ATOM上部のパッケージの欄からコマンドパレットを開き「github:clone」と入力。
clone fromに先ほど控えてたアドレスをペースト。
To directoryには作った空のフォルダのディレクトリパスを入力


リポジトリの取得完了


AtomからGitHubのリポジトリにPushする(アップロード)

データの変更があるとGitタブのUnstaged Chagesに変更があったファイル名が表示されます
(ここではtest.htmlというファイルを新規作成しました。)


stage Allをクリック


すると変更のあったファイルがStaged Changesの欄に降りてくるので、
Commit messageに作業内容等を入力して青いバーをクリック


最下部の「push」の欄の横に数字が表示されているのを確認出来たらクリック


Githubのページでpushしたファイル名が確認できたら完了


AtomでGitHubのリポジトリからpullする(ダウンロード)

Gitで共有しているファイルを他の人が編集した場合の
ATOMを使ったPull(自分のファイルと同期させる)の方法を説明します。


ATOMのGitタブの最下部にある「Fetch」をクリックして、ファイルの更新があったかを確認します。


更新があった場合、「Fetch」の部分が「Pull」と数字の表記に代わると、更新データがあるということなので
「Pull」をクリックします。


Githubのページでpullしたファイル名が確認できたら完了
(今回はREADME.mdという新しいファイルが確認できました)

関連記事

  • 【EC-CUBE + IT導入補助金】2019年のIT導入支援事業者に採択されました【EC-CUBE + IT導入補助金】2019年のIT導入支援事業者に採択されました 2019年のIT導入支援事業者に採択されました。 IT導入補助金を利用し、EC-CUBEなどのITツールの導入をサポートいたします。 EC-CUBEの導入で最大150万円の補助を受けられます。導入をご検討の方は、お気軽にお問い合わせください。 1次公募 […]
  • WordPress[WordPress] 固定ページのビジュアルエディタを使用不可にする WordPressでウェブサイトを構築すると、固定ページにHTMLをゴリゴリ書いた内容を登録することが多くなります。登録した内容をビジュアルエディタで編集すると表示が崩れるので、ビジュアルエディタの使用不可にしたいことがありますが、その方法です。 functions.phpに以下のコードを挿 […]
  • facebookFacebookのOGPの内容を再読み込みさせる WEBサイトを公開する前の制作段階ではBasic認証で保護しておくことがありますが、その状態でページに設置した「いいね」や「シェア」をすると、以下のような 401 authorization required […]