好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

MacにAtomを入れる

良いエディタはないか

HTMLやCSSJavaScriptの勉強をしたいんだよね、Macで。

というわけで、デスクトップに新しいフォルダを作って.htmlファイルを1つ置いてみたんだけど、
Macに備え付けの「テキストエディット」様、アカンやつや…!

別にフォントの指定なんかいらんねん。
等幅フォントで表示してくれたらええねん。
どう考えてもコード書くのに向いてへん。

と、いうわけでいいエディターがないか調べてみた。
すると、こんな↓サイトがありました。

eng-entrance.com

この中に、

LiveweaveはHTML、CSSJavaScriptなどのフロント画面を、編集しながら確認も出来るテキストエディタだ。上記のように画面が分割されて、左上がHTML5・左下がCSS3・右上がJavaScript・右下が実際の画面となっている。

とあったので、「Liveweave」を入れてみようかと思ったのですが、
このエディターはブラウザ上で動く物、ということでローカルで完結させたい私には少しハードルが高い…
(参考:

リアルタイムで編集・確認ができるエディタLiveweaveが超便利!その魅力と使い方をご紹介! | NESTonline Blog


MacBookに慣れたら再検討しようかな。

ということで、イチオシされているAtomを入れよう。

Atomをインストール

https://atom.io にアクセス

f:id:Sukinakoto:20170813223710p:plain

Atomのダウンロードファイルを取得

「Download For Mac」をクリック。
atom-mac.zipのダウンロードが始まります。
zip形式なんだなぁと思ってダウンロード中のゲージを眺めていたら、

f:id:Sukinakoto:20170813224236p:plain

おやぁ?ダウンロードが終わると全然zipっぽくないアイコンになっていますね。
思いっきり、「アプリケーション」であると主張されていますよ…
これはどうしたら良いのでしょう。atom-mac.zipはどこへ行ったの?もう、解凍されてしまったの?
Macの世界は何がどうなっているのかさっぱり分かりません。

Atomのアプリケーションファイルを開く

Mac - テキストエディタ「Atom」のインストール - 開発メモ - Webkaru

によると、
ダウンロードフォルダに保存されたAtomアプリケーションはアプリケーションフォルダに移動してあげると良いようです。

f:id:Sukinakoto:20170814002437p:plain


アプリケーションフォルダにAtomを移動して、Atomアイコンをダブルクリック。えいっ!

f:id:Sukinakoto:20170813225303p:plain
何かが何かを検証して…

f:id:Sukinakoto:20170813225336p:plain

うわっ。何か聞いてきた。なになに…
今まさにデジタル証明書のあるサイトから自分でダウンロードしてきたファイルだから、大丈夫だね。「開く」をクリック。

f:id:Sukinakoto:20170813225619p:plain
おぉ。アプリケーションが立ち上がった。

Atomに日本語化パッケージを入れる

Atomには日本語に対応した拡張機能があるということなので、早速入れてみよう。

設定タブを開く

f:id:Sukinakoto:20170813225014p:plain
「Packages」の「Settings View」の「Open」をクリック。

f:id:Sukinakoto:20170813230218p:plain

インストールメニューを開く

「Install」をクリック。

f:id:Sukinakoto:20170813234148p:plain

japanease-menuパッケージを検索

「Install Packages」に"Japanese-menu"と入力して、「Packages」ボタンをクリック。
少し待つと…

f:id:Sukinakoto:20170814000029p:plain

「japanese-menu」というパッケージアイコンが出てきましたね。

japanease-menuパッケージをインストール

「japanese-menu」パッケージの「install」ボタンをクリック。
少し待つと…

f:id:Sukinakoto:20170814000102p:plain

インストールが完了し、メニューが日本語表記になった!

最後に、今後Atomを使うにあたって参考にできそうなサイト↓

eng-entrance.com