制作環境SublimeTextからAtomに乗り換えたのでまとめ2015-07-01TweetPocketSublimeTextはコーダーの中でも使用してい割合が最も高く、非常にクオリティの高いテキストエディターです。カラースキームの変更やパッケージのインストールで様々な機能を追加できてものすごく便利なんですが、たった1つだけ難点が...それは「お金払ってね!」のポップアップが10分に1回くらい出てくること。払えないほど高価ではないので払ってしまえばいいんですが、払ったら負けかな、ということで払ってませんでした!一方最近Ver1.0が公開され、より一層完成度が高まっているAtomの方には「お金払ってね!」ポップアップがありません!それだけでなく、テーマやパッケージがかなり充実していて今までSumblimeTextに慣れている人でも十分乗り換え可能なレベルになってます。いうことでここではSublimeTextからAtomに乗り換える人のための環境設定やショートカットの確認を行っていきたいと思います。SublimeTextからAtomにスムーズに乗り換える方法Atomのインストール方法まずはAtomをインストールしましょう。特殊なことはしなくてもよく、通常のアプリと同様の方法でインストール完了できます。Atomのパッケージの使い方パッケージはSublimeTextにもありましたが、スニペットやカラーピッカーなど様々な便利機能を追加できるシステム。Atomではセッティング画面から簡単に検索でき、パッケージをインストールした後にオンオフすることもできます。セッティング画面を開きます。そのあと、installをクリックしてインストール画面を開き、検索フォームでパッケージを検索すればOK。欲しいパッケージが見つかったらinstallボタンを押すだけでインストール完了です。フォームの右にはパッケージとテーマを入れ替えるボタンがあるので、テーマを検索したいときはテーマボタンを押してから検索します。AtomのテーマAtomではテーマもかなり充実しています。テーマはパッケージとして提供されているので、インストール方法もパッケージと同じ。インストールしたテーマをクリックすると、テーマに関する詳細情報を見ることができます。Atomでスニペットを登録する方法Atomのパッケージを使えばある程度のスニペットをカバーできますが、自分でカスタマイズすることもできます。クリックしてスニペット登録画面を開いて登録します。スニペットはこの画面で登録していくことになります。サンプルにも記述されていますが、以下のようなフォーマットで登録できます。それぞれの意味は、言語、スニペット名(説明)、ショートコード(トリガー)、展開されるコードとなっています。'console.log(${1:"crash"});$2'言語の設定は、packagesページで言語を検索し、詳細ページのscopeをチェックすればOK。body部分には$マークを使うことで、tabを押したときのストッパーを設置できます。{1:"crash"}のように記述することで、テキストを選択状態にできるため、より素早くコードの編集が可能に。展開されるコードが複数行になる場合は、"""を使って以下のようにすればOK。"""AtomのおすすめパッケージAtomにはデフォルトで70以上のパッケージがインストールされていますが、さらに追加していくことで自分の環境に合ったエディターにカスタマイズすることができます。言っても大量にあるパッケージの中から探すのは結構大変。ここではとくに人気のおすすめできるパッケージを紹介します。人気のパッケージatom-beautifyダーティーなコードを綺麗に整列してくれるパッケージ。Contentを選ぶだけ。emmetHTMLやCSSを短縮コードで記述でき、コーディング作業を効率化できる便利な機能。Emmetの使い方はこちらcolor-pickerカラーの設定に便利なカラーピッカー機能が使えるようになります。file-iconsツリービューで表示されるファイルを言語ごとに分かりやすいアイコンで表示してくれます。minimapSublimeTextにもあるMinimapを追加してくれます。長いソースコードを編集するときに便利。その他のパッケージはこちら。人気のテーマmonokaiseti-syntaxunity-uiその他のテーマはこちら。AtomのショートカットチートシートAtomで使える基本的なショートカットをまとめたチートシートが以下のページで公開されています。基本的な操作はSublimeTextとほぼ同じなのでスムーズな移行ができそうです。Sheet最後に今回SublimeTextからAtomに乗り換えてみましたが、なんと言っても超軽量で、パッケージなども充実しており非常に使いやすいというイメージです。僕のようなWeb系フロントエンドに限定されないような様々な機能を追加できるので、Webデザイナーの方にもプログラマーの方にもおすすめできるエディターになっていると思います。使い方もSublimeに近いところが多いのですぐに移行することができました。SugimoriフリーランスのWebエンジニア。現在はテンプレート職人としてTetraThemesでテンプレートを開発中。ブログや個人に関するお問い合わせはTwitterかFacebookへ。2017-06-26Webに必須の高品質な写真素材を無料でダウンロードできるサイトを10本集めてみました。Web制作に限らずWebライティングでも必ず必要なのが写真素材。2017-06-21カラーミーショップはスマホでもECショップを構築できる手軽さと、HTMLやCSSを編集しオリジナルデザインのショップを作成できる拡張性を両方兼ね備えたECサービス。2017-06-21カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので完全オリジナルデザインのショップを自由に構築することができます。2017-06-19カラーミーショップは初心者でも簡単にショップを開設できるECサービス。HTMLやCSSの編集も可能なので頑張ればオリジナルデザインのショップを構築することも可能です。2017-06-16カラーミーショップはHTMLとCSSの編集ができ、オリジナルデザインのショップを構築することができるECサービスです。USTetraThemesはWordpressやカラーミーショップ、EC-CUBEのテンプレートの販売、CMSのカスタマイズ方法、Bootstrapの使い方などWeb制作に関する記事を書いているサイトです。