fc2ブログ

Home > ユーティリティ > 自分色にハックする21世紀エディタ「Atom」

自分色にハックする21世紀エディタ「Atom」

atom_blog1.jpg

Atomは、Github製エディタです。私のコーディングの主力エディタは、miEspressoCodaと移ってきて、この数年はずっとCodaだったんですが、Sublime Textの人気っぷりが気になって、使ってみて(残念ながら恋に落ちなくて)スルーしてAtomを使ってみています。
今のところフリーソフトなので、敷居も低くて素敵ですね。

キーボードショートカット+コマンドパレットでタイピングを高速化していくタイプ。

エディタもいろいろありまして。GUIでボタンをつくってマウスだけですべて操作できちゃうCodaみたいなもの(シンプルなエディタに多いタイプ)と、emacsみたいなコマンドラインでぐりぐり書くもの、EclipseやXcodeみたいにIDE(統合開発環境)と言われるすごく多機能でコマンドもカスタマイズも設定ファイルにも直書きできちゃうようなものがあります。

で、Atomはというと、GUIでそこそこ操作ができるけど、IDEほどパワフルではなくて取っ付き易くて、基本的には初期設定で操作が可能だけど、たとえば、木枠と基本的な機能のみのお家が用意されていて、壁紙や、照明などを自分の使いやすいようにできるといういいとこ取りのエディタ。というのが今の感想です。

いろんな機能にアクセスするにはショートカットや、コマンドを打ち込むのが基本ですが、いろいろSuggestしてもらえるので、いままでマウスだけで乗り切ってた人にも易しめなのかなとおもいます。

自分の環境に合わせてパッケージをダウンロードするので、「自分に何が必要か」をわかっている必要があるかも

なんとなくなんですけど、「基本構造は組んでおいたから。あとは好きにしてね!」っていうタイプのアプリなので、自分の仕事で何が必要なのかをきちんと理解して、必要なものを選べたら、きっとサクサク動く理想のエディタができる感じ。
逆によくわかっていなくて、「いろいろ落として入れてたら重くなっちゃった。」とか
「カスタマイズをしてたら日が暮れた。」という危険性(?)もあるかもしれません。

とにかくなんか可愛い。←ここ重要

一番上のバーだけがちょっと不細工だけど、他のカスタマイズ可能エリアは可愛くできます。紺✕ディープグレーな元Themeも可愛いけれど、打ち込みに慣れちゃってるのでCoda系のコードカラーリングに変えてます。

あと、タブの分け方のデザインが好き。見やすい。
GUIでぽちぽち打ち込んでいた私でも、なんかショートカット系コーディングやってみようかなーとやる気になれました。

私がインストールしているパッケージ

tag
閉じタグを補完してくれる

project-manager
複数プロジェクトの管理に便利。プロジェクトの保存と、高速アクセス。

save-session
前に開いていたファイルの状態で起動してくれる
(project-managerと一緒に使うと便利。)

japanese-wrap
日本語をうまいことしてくれる

file-icons
ファイルのアイコンをカラーリングしてくれる

emmet
emmetのプラグイン。

autocomplete-paths
ファイルパスをSuggestしてくれる

atom-html-preview
htmlのプレビュー機能。いちおう。

スニペットはSettings > Open Config Folder で、「snippets.cson」を編集

HTML系のエディタでつかうスニペットは、「.text.html.basic」で指定したら動きました。


'.text.html.basic':
'log1':
'prefix': 'l'
'body': 'console.log($1);'
'log2':
'prefix':'cl'
'body': 'console.log($1);'

各言語に対してスコープを指定し、指定した中にまとめて書き込むスタイルのようです。


スコープ名は、Settings > Packages から「html」とか「javascript」とか打ち込んで、パッケージをクリックして展開したところにあります。

よく使いそうなショートカット(※私の環境で)
ファイル操作

ファイル追加 a
ディレクトリ追加 shift + a
パスのコピー Shift + ctrl + c
同じディレクトリのファイルリスト ⌘ + t

スニペット

スニペットリスト表示 alt + shift + s

コマンド系

コマンドパレット表示 ⌘ + shift + p
プロジェクトリスト表示 ⌘ + ctrl + p
emmet展開 ctrl + e


新世代型のアプリは全体的にまだベストってわけではない気がしますが、ベターにはなりつつあるのかなと感じました。ほぼいじらなくてもじゅうぶん使えるレベルにしてくれているのが嬉しいですね。

すばやくコードを打ち込むためのツールなので、設定だけで力尽きずに使ってみることが大事なのかなと。こういうのカスタマイズするの楽しいから時間すぐ過ぎちゃう。でも楽しいって結構大事だったり。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/163-baeec8bb
Listed below are links to weblogs that reference
自分色にハックする21世紀エディタ「Atom」 from バニデザノート

Home > ユーティリティ > 自分色にハックする21世紀エディタ「Atom」

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items