ja ja ja zh zh ceb ja ja ja ja ja ja ja ja ja fa ja ja ja ja ja de ja ja nl en ja ja ja id ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja id ja ja ja ja ja en de ja ja ja ja en ja ja ja ja ja ja ja ja ja en en ja ja ja ja ja ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja zh ja ja ja ja ja ja ja ja en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja nl en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja zh ja ja ja ja ja ja ja ja ja ja ja ja ja zh en ja ja ja ja ja ja ja en ja de en ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja ja zh zh ceb ja ja ja ja ja ja ja ja ja fa ja ja ja ja ja ja
(6)インストール終了
インストールが終了すると、メニューバーとコンテキストメニューの表示が日本語で表示される。
この例では日本語化パッケージをインストールしたが、他のパッケージをインストールする場合でも同じようにパッケージ検索からインストールすることができる。
なお、インストールしたパッケージを使わない場合は、この画面の「無効にする」でパッケージを保持したまま無効に、「アンインストール」でパッケージをアンインストールすることができるので、覚えておいてほしい。
Atomでのフォルダとプロジェクトフォルダの違い
Atomには「フォルダ」と「プロジェクトフォルダ」という2種類のファイル管理方法がある。いずれもフォルダに含まれているサブフォルダやファイルを画面左にツリー形式で表示する便利な機能であるが、この違いは何であろうか。
Atomのフォルダ説明
まずは「フォルダ」について説明しよう。たとえば次のように「prod」と「test」という2つのフォルダがあるとして、Atomからフォルダを開いてみる。
(1)画面左上のメニュー
画面左上のメニューから[ファイル(F)]→[フォルダを開く]を選択する。
(2)Open Folder
「Open Folder」ダイアログで「prod」を選択し、「フォルダーの選択」ボタンをクリックする。
(3)選択したフォルダ以下のファイルが表示される
この状態で、もう一度メニューから[ファイル(F)]→[フォルダを開く]を選択し、今度は「Open Folder」ダイアログで「test」を選択してみよう。
(5)新しいウィンドウが開く
すると、新しいウィンドウが開いて「test」フォルダが表示される。
このように「フォルダの追加」は「1つのウィンドウに、指定した1フォルダの情報を表示する」という管理方法なのである。
Atomのプロジェクトフォルダ設定
それではプロジェクトフォルダはどうだろう。先ほど開いた「prod」フォルダのウィンドウで試してみよう。
(1)プロジェクトフォルダを追加
画面左上のメニューから[ファイル(F)]→[プロジェクトフォルダを追加]を選択する。
(2)フォルダーを選択
「Open Folder」ダイアログで「test」を選択し、「フォルダーの選択」ボタンをクリックする。
(3)両方が表示される
すると、今度は画面左のツリービューに「prod」と「test」の両方のフォルダが表示された。
このように、プロジェクトフォルダとは、「1つのウィンドウに、複数のフォルダの情報を1つのプロジェクトとして表示する」という管理方法である。
別々の場所に分かれているファイルをひとつにして管理したい場合に使いやすい機能なので、ぜひ覚えておいてほしい。
Atomの文字化け対策
Atomを使っていると、以前に作成したファイルの日本語が文字化けして表示されてしまうことがよくある。どうしても日本語は新しいエディタと相性が悪いものだ。
文字にはそれぞれ「文字コード」と呼ばれるコードがあり、コードが一致しないとこのように表示されてしまう。ここではAtomで文字化けしたときの対処法をいくつか紹介しよう。
結論的には、UTF-8だと大体表示されるが、他だと結構文字化けるという話だ。
文字コードを切り替える
画面右下に文字コードが表示されているが、ここから文字コードを切り替えることができる。
(1)画面右下の文字コードをクリックする
ここでは「UTF-8」をクリックしよう。
(2)文字コード一覧が表示される
文字コード一覧が表示されるので、切り替えたい文字コードを選択する。Windowsの場合は大抵「Shift JIS」なので「Japanese(Shift JIS)」を選択しよう。
正しい文字コードが選択されると、このように日本語が表示される。まだ文字化けしている場合は切り替えた文字コードが誤っているので、正しい文字コードを選択しよう。
デフォルト文字コードを変更する
先ほど紹介した方法だと、毎回文字コードを指定しなければならず手間がかかってしまう。また、一度別のファイルを開いて、再びファイルを開くとまた文字化けしてしまうのだ。
これはデフォルトに設定されている文字コードが開こうとしているファイルの文字コードと合わないからだ。ではいっそのこと、デフォルト文字コードを変更すれば良い。
基本的にはUTF-8で新しいものは作っていくほうがいいだろうが、サーバなどの関係上どうしようもないことはあるものだ。
画面左上のメニューから[ファイル(F)]→[環境設定(T)]を選択する。
[コア設定]の「ファイルエンコーディング」からデフォルトに設定したい文字コードを選択する。この例では「shiftjis」を選択した。
(3)文字コードが切り替わる
ファイルを開くと、文字コードの切り替えを行わずに日本語が正しく表示されている。
文字コードを自動判別する
デフォルトの文字コードを指定してしまうと切り替えがなく楽ではあるが、プログラマやウェブデザイナは様々な文字コードのファイルを扱うこともあり、文字コードが合わないと結局毎回文字コードを切り替える必要がある。
そこで、ファイルを開くたびに文字コードを自動判別してくれるパッケージ「auto-encoding」をインストールしてみよう。
画面左上のメニューから[ファイル(F)]→[環境設定(T)]を選択する。
(2) auto-encodingをインストール
「Settings」タブの[+インストール]から、検索対象パッケージの入力欄に「auto-encoding」と入力し、「Packages」ボタンをクリックして検索する。検索結果が出たら「インストール」ボタンでインストールしよう。
(3)文字コードが自動的に判別される
ファイルを開いてみると、日本語が正しく表示されている。異なる文字コードで書かれたファイルを開いても、ファイルの文字コードで表示される。画面右下に表示されている文字コードで確認することができるだろう。
それでは最後にAtomの便利な機能をいくつか紹介しておこう。
入力中のHTMLタグなどの入力候補を表示してくれる。この機能は「autocomplete-plus」というパッケージの機能で、標準でインストールされている。
パスのオートコンプリート
HTMLファイルを作成する際にファイルパスを指定することが多いが、このパッケージはファイルパス入力時に相対ファイルパスを入力補完してくれる。
標準ではないのでインストールが必要だ。
「Settings」タブの[+インストール]で「autocomplete-paths」のキーワードを指定して検索、インストールしよう。
対応タグ・括弧ハイライト
HTMLタグの開始タグと終了タグや、対応する括弧をアンダーラインでハイライト表示できる。
HTMLタグを折りたたみすることができる。行番号にマウスカーソルを合わせると「v」マークが表示されるので、クリックすると折り畳み。
折りたたんだコードを戻すには行番号の「>」マークをクリックするともとに戻る。
開いているファイルを上下左右に分割表示できる。ここでは右クリックメニューから「ペイン分割・複製→」を選択してみよう。
指定した方向にペインが分割表示された。
[ファイル(F)]→[環境設定(T)]の「キーバインド」から、よく使う機能をショートカットキーとして設定することができる。
[ファイル(F)]→[環境設定(T)]から「テーマ」を選択し、お好みのテーマに変更することができる。画面表示のテーマを変更することができる。見やすいテーマを選択するといいだろう。
「インターフェーステーマ」はタブやツリービューなどのテーマ、「シンタックステーマ」はエディタのテキスト欄のテーマをそれぞれ指定することができる。
上記で紹介した機能以外にもまだまだ便利な機能がパッケージとして豊富に提供されているので、Atomのパッケージの情報を検索して調べてみるといいだろう。
画面左のツリービューにあるファイルアイコンをファイル形式に応じて表示してくれる「file-icons」や、カラーピッカーを表示する「color-picker」のパッケージが気になるところだが、残念ながらこのブログ執筆時点(2017/1/14)ではWindows10環境で動作しなかった。改善を心待ちにすることにしよう。
このページではAtomエディタのインストール方法、日本語化、簡単な使い方についてお伝えをしてきた。
パッケージを導入していくとさらに色々なことが可能になっていく。「こうしたい!」と思うものは大抵揃っていると言っていいだろう。そのときどきで調べつつ、パッケージを追加していこう。
このページの続きや関連ページは下記から一覧で確認できます。
テキストエディタカテゴリーに戻る
IT講師に興味はありませんか?
・「今までIT講師をやってきたが、更に多くの講義を行いたい」
・「エンジニアとしてやってきたが講師業に魅力を感じている」
・「講師として活躍するためにベースとなる知識を知りたい」
・「様々な分野や言語の講師にチャレンジしてみたい」
という方はぜひIT講師募集のページをご覧ください。
リスキルテクノロジーでは「受講している方々にITを好きになってもらう」ことを目標に、同じ目標に向かって歩んで行ける講師の方を常に探しています。
システム開発やインフラ構築などのエンジニアリング経験を活かし、新入社員などの未経験者や経験の浅い初学者の方々に対してITトレーニングを行っていただくことになります。
テキストやカリキュラムは事前に用意されており、それらを元に講義を進めていくため、IT講師をはじめて実施する方でも安心してトレーニングを実施できます。
IT講師募集のページを見る
SNSでもご購読できます。
Twitterでフォローする
Feedlyでフォローする
リカレントテクノロジー
【ITエンジニア養成スクール & IT研修専門企業のリカレントテクノロジーです。】エンジニアの入り口に立つために役立つようなコンテンツを日々ご提供していきます。講師や代表やスタッフ陣が毎日楽しく書いています。ご質問・ご指摘等はぜひコメントください。
2020年5月5日 11:57 PM
Atomをlinuxインストールしました日本語化するには"(1)画面左上のメニューから[File]→[Settings]を選択する"とありますがmint linuxにイストールatomにはSettingsの
このSettingsは隠し項目になっているのでしょうかご教授いただけますか。
Atomは端末から簡単にインストールできましたさくらエディタを使用としましたがインスト
ールが上手くいかず諦めました。
よろしくお願いします。
リカレントテクノロジー より:
2020年5月11日 10:04 AM
ご愛読いただきありがとうございます。
おそらくLinuxの種類によってAtomの表示が変わっているものと思われます。
本記事ではWindows10を想定して記述しております。
メニューバーにある「Edit」→「Preferences」をクリックしてみてください。そうしたら「Settings」タブが出てこないでしょうか。
もしもそれでもうまくいかない場合は、再インストールいただくか、別のOSで試してみてはいかがでしょうか。
宜しくお願い致します。
2020年5月14日 9:20 PM
リナックスアカデミさんありがとうございます
2020年8月10日 10:13 AM
20200810 download
自宅での使用するためにインストール。
コメントを残す コメントをキャンセル
メールアドレス(公開はされません。) *
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
ファイルやディレクトリをコピーするcpコマンドの使い方!【Linuxコマンド集】
ファイルなどを検索する!findコマンドの詳細まとめ【Linuxコマンド集】
grepコマンドの詳細まとめました【Linuxコマンド集】
【初心者向け】3分でわかるLinuxでできることまとめ 10選
【Windows編】フリーテキストエディタ13選!初心者にもおすすめ
lsコマンドの使い方と覚えたい15のオプション【Linuxコマンド集】
ファイル・ディレクトリを削除するrmコマンドについて詳しく!【Linuxコマンド集】
【目的別】初心者におすすめのLinuxディストリビューション7選
【初心者必見】コマンドプロンプトの使い方と覚えておきたい便利な機能
【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方
【2023年度最新】おすすめの新入社員向けC#研修 9選
【初心者向け】Pythonの特徴8選
【1分で読める】プログラミング講師になる7つのメリット
【PHP入門者向け】 PHPの文字列リテラルについて知ろう
【PHP入門者向け】 文字列の中の変数展開についてまとめました
【ざっくり理解する】 IPv6アドレスとは?
【初心者向け】システムエンジニアとは?その種類と役割は?
【Java & Tomcat】HttpServletResponseインターフェイスについて知ろう
【Java & Tomcat】Webアプリケーションの設定(web.xmlの設定)※サンプルプログラム付き
【Java & Tomcat】Webアプリケーションの設定(マッピング)※サンプルプログラム付き
【Java & Tomcat】コンテンツタイプの設定(setContentType)※サンプルプログラム付き
【Java & Tomcat】サーブレットのライフサイクル ※サンプルプログラム付き
【Java & Tomcat】文字出力用のストリームの取得(getWriter)※サンプルプログラム付き
【Java & Tomcat】リダイレクトの設定(sendRedirect)※サンプルプログラム付き
【Java & Tomcat】サーブレットからフォームデータを取得する(サンプルコード付き)
IT研修サービス(リスキルテクノロジー)
短期IT研修サービス(リスキル)
ビジネス研修(リスキル)
プログラミング講師募集
JavaScript入門
プログラミングスクール
© Copyright 2022 エンジニアの入り口. All rights reserved.
未経験からの育成制度も充実
IT講師に興味はありませんか?
リスキルテクノロジーでIT講師の積極募集を開始! 経験・未経験問わずご応募可能。育成制度で講師スキル向上も目指せます